跳到内容
Pages 路由器入门项目结构

项目结构与组织

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

文件夹和文件约定

顶层文件夹

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

Route segments to path segments
appApp Router
pages页面路由
public要提供的静态资源
src可选的应用程序源文件夹

顶层文件

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

Next.js
next.config.jsNext.js 配置文件
package.json项目依赖项和脚本
instrumentation.tsOpenTelemetry 和 Instrumentation 文件
proxy.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自定义应用
_document.js .jsx .tsx自定义文档
_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可选全捕获路由段