项目结构和组织

本页提供了 Next.js 中所有文件夹和文件约定的概述，以及组织项目的建议。

文件夹和文件约定

顶级文件夹

顶级文件夹用于组织应用程序的代码和静态资源。

app	App 路由
pages	Pages 路由
public	要提供的静态资源
src	可选的应用程序源代码文件夹

顶级文件

顶级文件用于配置应用程序、管理依赖项、运行中间件、集成监控工具和定义环境变量。

Next.js
next.config.js	Next.js 配置文件
package.json	项目依赖项和脚本
instrumentation.ts	OpenTelemetry 和检测文件
middleware.ts	Next.js 请求中间件
.env	环境变量
.env.local	本地环境变量
.env.production	生产环境变量
.env.development	开发环境变量
.eslintrc.json	ESLint 配置文件
.gitignore	Git 要忽略的文件和文件夹
next-env.d.ts	Next.js 的 TypeScript 声明文件
tsconfig.json	TypeScript 配置文件
jsconfig.json	JavaScript 配置文件

pages文件约定

_app	.js .jsx .tsx	自定义应用
_document	.js .jsx .tsx	自定义文档
_error	.js .jsx .tsx	自定义错误页面
404	.js .jsx .tsx	404 错误页面
500	.js .jsx .tsx	500 错误页面

路由

文件夹约定
index	.js .jsx .tsx	首页
folder/index	.js .jsx .tsx	嵌套页面
文件约定
index	.js .jsx .tsx	首页
file	.js .jsx .tsx	嵌套页面

动态路由

文件夹约定
[folder]/index	.js .jsx .tsx	动态路由段
[...folder]/index	.js .jsx .tsx	捕获所有路由段
[[...folder]]/index	.js .jsx .tsx	可选捕获所有路由段
文件约定
[file]	.js .jsx .tsx	动态路由段
[...file]	.js .jsx .tsx	捕获所有路由段
[[...file]]	.js .jsx .tsx	可选捕获所有路由段