项目结构与组织方式
本页全面介绍了 Next.js 中所有文件夹与文件约定，并提供项目组织建议。
文件夹与文件约定
顶级文件夹
顶级文件夹用于组织应用程序代码和静态资源。
顶级文件
顶级文件用于配置应用程序、管理依赖项、运行中间件、集成监控工具以及定义环境变量。
| 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 配置文件 |
文件约定
_app | .js .jsx .tsx | 自定义 App 组件 |
_document | .js .jsx .tsx | 自定义 Document |
_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 | 可选全捕获路由段 |