Attention: This page is 9 days older than the English version and might be outdated. If you're a native speaker of this language and would like to contribute to the project, please consider updating this page to match the latest English version.
You can also view the English version of this page.
文件夹结构
请选择你要安装的依赖包来查看一个对应新建的 T3 App 的文件夹结构。继续往下阅读,你可以从每个文件夹的描述了解它们对应的用途。
prisma
文件夹 prisma
包含了 schema.prisma
文件,它被用于配置数据库连接和定义数据结构。数据库的迁移记录文件以及初始化种子脚本(如果你需要的话)也会被放在这个文件夹里。 参看 Prisma 的用法 来了解更多。
public
文件夹 public
包含了一些将被托管在服务器上的静态资源。例如文件 favicon.ico
。
src/pages
文件夹 pages
包含了 Next.js 应用的所有页面。根目录下的文件 index.tsx
则是应用程序的首页。文件 _app.tsx
被用于使用 provider 来包裹整个应用程序。参看 Next.js 文档↗ 来了解更多。
src/pages/api
文件夹 api
包含了 Next.js 应用的 API 路由。文件 examples.ts
(安装 Primsa 后会出现)包含了一段搭配 Prisma 使用 Next.js API 路由↗ 的示例代码。文件 restricted.ts
(安装 Next-Auth 后会出现)则包含了一段受 NextAuth.js↗ 保护的示例路由代码,它同样也使用了 Next.js API 路由↗。
src/pages/api/auth/[...nextauth].ts
文件 [...nextauth].ts
包含了 NextAuth.js 认证的动态 slug 路由。它被用于处理认证请求。参看 NextAuth.js 用法 来了解更多关于 NextAuth.js 的用法,以及 Next.js 动态路由文档↗ 来了解更多关于 catch-all 和 slug 路由的信息。
src/pages/api/trpc/[trpc].ts
文件 [trpc].ts
是 tRPC API 的入口。它被用于处理 tRPC 请求。参看 tRPC 用法 来了解更多关于这个文件的信息,以及 Next.js 动态路由文档↗ 来了解更多关于 catch-all 和 slug 路由的信息。
src/server
文件夹 server
被用于清晰划分服务端和客户端代码。
src/server/common
文件夹 common
包含了常用的可复用服务端代码。
src/server/common/get-server-auth-session.ts
文件 get-server-auth-session.ts
被用于在服务端获取 NextAuth.js 的 session。参看 NextAuth.js 用法 来了解更多。
src/server/db/client.ts
文件 client.ts
被用于初始化一个全局的 Prisma 客户端。 参看 Prisma 用法 来了解更多。
src/server/trpc
文件夹 trpc
包含了 tRPC 服务端的代码。
src/server/trpc/context.ts
文件 context.ts
被用于创建上下文,该上下文会被用于 tRPC 的请求里。参看 tRPC 用法 来了解更多。
src/server/trpc/trpc.ts
文件 trpc.ts
被用于导出路由 procedure 的 helper 函数。参看 tRPC 用法 来了解更多。
src/server/trpc/router
文件夹 router
包含了 tRPC 的路由。
src/server/trpc/router/_app.ts
文件 _app.ts
主要用于合并多个 tRPC 路由,并将它统一导出为一个路由,以及其对应的类型定义。参看 tRPC 用法 来了解更多。
src/server/trpc/router/auth.ts
文件 auth.ts
包含了一段 tRPC 路由的示例代码,它利用了 protectedProcedure
来展示如何用 NextAuth.js 来保护 tRPC 路由。
src/server/trpc/router/example.ts
文件 example.ts
包含了一段 tRPC 路由的示例代码,它利用 publicProcedure
来展示如何创建一个公开不受保护的 tRPC 路由。
src/styles
文件夹 styles
包含了应用的全局样式。
src/types
文件夹 types
被用于存储复用的类型或类型声明。
src/types/next-auth.d.ts
文件 next-auth.d.ts
被用于扩展 NextAuth 的默认 session 类型,这里将用户 ID 也添加了进来。参看 NextAuth.js 用法 来查看更多。
src/utils
文件夹 utils
被用于存储经常复用的工具函数。
src/utils/trpc.ts
文件 trpc.ts
是 tRPC 的前端入口。参看 tRPC 用法 来了解更多。
.env.example
文件 .env.example
根据所选库包展示了一个环境变量示例配置。这个文件需要被提交到 git 历史记录里。
.eslintrc.json
文件 .eslintrc.json
被用于配置 ESLint。参看 ESLint 文档↗ 来了解更多。
next-env.d.ts
文件 next-env.d.ts
确保 TypeScript 编译器能够采用 Next.js 的类型。你不应该移除或修改该文件,因为它可以随时发生变化。 参看 Next.js 文档↗ 来了解更多。
next.config.mjs
文件 next.config.mjs
被用于配置 Next.js。参看 Next.js 文档↗ 来了解更多。注意:.mjs 格式的文件被用于允许以 ESM 方式导入。
postcss.config.cjs
文件 postcss.config.cjs
被用于配置 Tailwind PostCSS 的用法。参看 Tailwind PostCSS 文档↗ 来了解更多。
prettier.config.cjs
文件 prettier.config.cjs
被用于配置 Prettier,以使用插件 prettier-plugin-tailwindcss 来格式化 Tailwind CSS 的类名。参看 Tailwind CSS 博客↗ 来了解更多。
tsconfig.json
文件 tsconfig.json
被用于配置 TypeScript。一些非默认项,例如 strict mode
已经被启用来保证使用 create-t3-app 和它所含库时能获得最佳的 TypeScript 开发体验。参看 TypeScript 文档↗ 或 TypeScript 用法 来了解更多。