项目结构
¥Project Structure
本页面概述了 Next.js 中所有文件夹和文件约定，以及组织项目的建议。
¥This page provides an overview of all the folder and file conventions in Next.js, and recommendations for organizing your project.
文件夹和文件约定
¥Folder and file conventions
顶层文件夹
¥Top-level folders
顶层文件夹用于组织应用的代码和静态资源。
¥Top-level folders are used to organize your application's code and static assets.
app | 应用路由 |
pages | 页面路由 |
public | 要提供的静态资源 |
src | 可选应用源文件夹 |
顶层文件
¥Top-level files
顶层文件用于配置应用、管理依赖、运行中间件、集成监视工具以及定义环境变量。
¥Top-level files are used to configure your application, manage dependencies, run middleware, integrate monitoring tools, and define environment variables.
| Next.js | |
next.config.js | Next.js 的配置文件 |
package.json | 项目依赖和脚本 |
instrumentation.ts | OpenTelemetry 和 Instrumentation 文件 |
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 的配置文件 |
文件约定
¥Files conventions
_app | .js .jsx .tsx | 自定义应用 |
_document | .js .jsx .tsx | 自定义文件 |
_error | .js .jsx .tsx | 自定义错误页面 |
404 | .js .jsx .tsx | 404 错误页面 |
500 | .js .jsx .tsx | 500 错误页面 |
路由
¥Routes
| 文件夹约定 | ||
index | .js .jsx .tsx | 主页 |
folder/index | .js .jsx .tsx | 嵌套页面 |
| 文件约定 | ||
index | .js .jsx .tsx | 主页 |
file | .js .jsx .tsx | 嵌套页面 |
动态路由
¥Dynamic routes
| 文件夹约定 | ||
[folder]/index | .js .jsx .tsx | 动态路由段 |
[...folder]/index | .js .jsx .tsx | 捕获所有路由段 |
[[...folder]]/index | .js .jsx .tsx | 可选 catch-all 路由段 |
| 文件约定 | ||
[file] | .js .jsx .tsx | 动态路由段 |
[...file] | .js .jsx .tsx | 捕获所有路由段 |
[[...file]] | .js .jsx .tsx | 可选 catch-all 路由段 |