---
title: 文件夹结构 (Pages)
description: 新创建的 T3 App 的文件夹结构
layout: ../../layouts/docs.astro
lang: zh-hans
isMdx: true
---

import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
import Form from "../../components/docs/folderStructureForm.astro";

请选择你要安装的依赖包来查看一个对应新建的 T3 App 的文件夹结构。继续往下阅读，你可以从每个文件夹的描述了解它们对应的用途。

<Form />

<Diagram />

<div data-components="prisma">

### `prisma`

文件夹 `prisma` 包含了 `schema.prisma` 文件，它被用于配置数据库连接和定义数据结构。数据库的迁移记录文件以及初始化种子脚本（如果你需要的话）也会被放在这个文件夹里。 参看 [Prisma 的用法](/zh-hans/usage/prisma) 来了解更多。

</div>
<div>

### `public`

文件夹 `public` 包含了一些将被托管在服务器上的静态资源。例如文件 `favicon.ico`。

</div>
<div>

### `src/env`

用于环境变量的验证和类型定义 - 参看 [环境变量](/zh-hans/usage/env-variables)。

</div>
<div>

### `src/pages`

文件夹 `pages` 包含了 Next.js 应用的所有页面。根目录下的文件 `index.tsx` 则是应用程序的首页。文件 `_app.tsx` 被用于使用 provider 来包裹整个应用程序。参看 [Next.js 文档](https://nextjs.org/docs/basic-features/pages) 来了解更多。

</div>
<div data-components="nextauth trpc">

#### `src/pages/api`

文件夹 `api` 包含了 Next.js 应用的所有 API 路由。参看 [Next.js API 路由](https://nextjs.org/docs/api-routes/introduction) 来获取有关 API 路由的信息。

</div>
<div data-components="nextauth">

#### `src/pages/api/auth/[...nextauth].ts`

文件 `[...nextauth].ts` 包含了 NextAuth.js 认证的动态 slug 路由。它被用于处理认证请求。参看 [NextAuth.js 用法](/zh-hans/usage/next-auth) 来了解更多关于 NextAuth.js 的用法，以及 [Next.js 动态路由文档](https://nextjs.org/docs/routing/dynamic-routes) 来了解更多关于 catch-all 和 slug 路由的信息。

</div>
<div data-components="trpc">

#### `src/pages/api/trpc/[trpc].ts`

文件 `[trpc].ts` 是 tRPC API 的入口。它被用于处理 tRPC 请求。参看 [tRPC 用法](/zh-hans/usage/trpc#-pagesapitrpctrpcts) 来了解更多关于这个文件的信息，以及 [Next.js 动态路由文档](https://nextjs.org/docs/routing/dynamic-routes) 来了解更多关于 catch-all 和 slug 路由的信息。

</div>
<div data-components="trpc prisma nextauth">

### `src/server`

文件夹 `server` 被用于清晰划分服务端和客户端代码。

</div>
<div data-components="nextauth+trpc">

#### `src/server/auth.ts`

服务器端认证逻辑的主入口。在这里，我们设置 NextAuth.js 的 [配置选项](/zh-hans/usage/next-auth)，执行 [模块扩展](/zh-hans/usage/next-auth#inclusion-of-userid-on-the-session)，并提供一些认证的 DX 工具，例如在服务器端检索用户的会话。参看 [NextAuth.js 用法](/zh-hans/usage/next-auth#搭配-trpc-的用法) 来了解更多。

</div>
<div data-components="prisma">

#### `src/server/db.ts`

文件 `db.ts` 被用于初始化一个全局的 Prisma 客户端。 参看 [Prisma 用法](/zh-hans/usage/prisma#prisma-客户端) 和 [使用 Prisma 与 Next.js 的最佳实践](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) 来了解更多。

</div>
<div data-components="trpc">

### `src/server/api`

文件夹 `api` 包含了 tRPC 服务端的代码。

</div>
<div data-components="trpc">

#### `src/server/api/routers`

文件夹 `routers` 包含了你的所有 tRPC 子路由。

</div>
<div data-components="trpc">

#### `src/server/api/routers/example.ts`

文件 `example.ts` 包含了一段 tRPC 路由的示例代码，它利用 `publicProcedure` 来展示如何创建一个公开不受保护的 tRPC 路由。

根据你选择的包，这个路由包含更多或更少的路由，以最好地展示符合你需求的用法。

</div>
<div data-components="trpc">

#### `src/server/api/trpc.ts`

文件 `trpc.ts` 是 tRPC 后端的主要配置文件。我们在这里进行以下操作：

1. 定义在 tRPC 请求中使用的上下文。 参看 [tRPC 用法](usage/trpc#-serverapitrpcts) 来了解更多。
2. 导出 procedure。 参看 [tRPC 用法](usage/trpc#-serverapitrpcts) 来了解更多。

</div>
<div data-components="trpc">

#### `src/server/api/root.ts`

root.ts 文件用于合并 tRPC 子路由并将它们导出为一个单一的路由，同时也导出了路由的类型定义。详见 tRPC 用法。

文件 `root.ts` 被用于合并 tRPC 子路由并将它们导出为一个单一的路由，同时也导出了路由的类型定义。参看 [tRPC 用法](usage/trpc#-serverapirootts) 来了解更多。

</div>
<div>

### `src/styles`

文件夹 `styles` 包含了应用的全局样式。

</div>
<div data-components="trpc">

### `src/utils`

文件夹 `utils` 被用于存储经常复用的工具函数。

</div>
<div data-components="trpc">

#### `src/utils/api.ts`

文件 `trpc.ts` 是 tRPC 的前端入口。参看 [tRPC 用法](/zh-hans/usage/trpc#-utilsapits) 来了解更多。

</div>
<div>

### `.env`

文件 `.env` 被用于保存环境变量。参看 [环境变量](/zh-hans/usage/env-variables) 来了解更多。该文件**不**应该被提交到 git 历史记录里。

</div>
<div>

### `.env.example`

文件 `.env.example` 根据所选库包展示了一个环境变量示例配置。这个文件需要被提交到 git 历史记录里。

</div>
<div>

### `.eslintrc.cjs`

文件 `.eslintrc.cjs` 被用于配置 ESLint。参看 [ESLint 文档](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) 来了解更多。

</div>
<div>

### `next-env.d.ts`

文件 `next-env.d.ts` 确保 TypeScript 编译器能够采用 Next.js 的类型。**你不应该移除或修改该文件，因为它可以随时发生变化。** 参看 [Next.js 文档](https://nextjs.org/docs/basic-features/typescript#existing-projects) 来了解更多。

</div>
<div>

### `next.config.mjs`

文件 `next.config.mjs` 被用于配置 Next.js。参看 [Next.js 文档](https://nextjs.org/docs/api-reference/next.config.js/introduction) 来了解更多。注意：.mjs 格式的文件被用于允许以 ESM 方式导入。

</div>
<div data-components="tailwind">

### `postcss.config.js`

文件 `postcss.config.js` 被用于配置 Tailwind PostCSS 的用法。参看 [Tailwind PostCSS 文档](https://tailwindcss.com/docs/installation/using-postcss) 来了解更多。

</div>
<div data-components="tailwind">

### `prettier.config.mjs`

文件 `prettier.config.mjs` 被用于配置 Prettier，以使用插件 prettier-plugin-tailwindcss 来格式化 Tailwind CSS 的类名。参看 [Tailwind CSS 博客](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) 来了解更多。

</div>
<div>

### `tsconfig.json`

文件 `tsconfig.json` 被用于配置 TypeScript。一些非默认项，例如 `strict mode` 已经被启用来保证使用 Create T3 App 和它所含库时能获得最佳的 TypeScript 开发体验。参看 [TypeScript 文档](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) 或 [TypeScript 用法](/zh-hans/usage/typescript) 来了解更多。

</div>
<div>

### `drizzle.config.ts`

文件 `drizzle.config.ts` 被文件用于配置 drizzle kit。更多信息请参看 [文档](https://orm.drizzle.team/kit-docs/config-reference)。

</div>
