Jump to content

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/env

用于环境变量的验证和类型定义 - 参看 环境变量

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

文件 .env 被用于保存环境变量。参看 环境变量 来了解更多。该文件应该被提交到 git 历史记录里。

.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 用法 来了解更多。


Recent Contributors To This Page