跳到内容
Pages Router开始使用项目结构

项目结构和组织

本页概述了 Next.js 中的文件夹和文件约定，以及组织项目的技巧。

文件夹和文件约定

顶层文件夹

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

Route segments to path segments
appApp Router
pagesPages Router
public要提供的静态资源
src可选的应用程序源代码文件夹

顶层文件

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

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

文件约定

_app.js .jsx .tsx自定义 App
_document.js .jsx .tsx自定义 Document
_error.js .jsx .tsx自定义错误页面
404.js .jsx .tsx404 错误页面
500.js .jsx .tsx500 错误页面

路由

文件夹约定
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可选的捕获所有路由段