此页面概述了 Next.js 应用程序的项目结构。它涵盖 app 和 pages 目录中的顶级文件和文件夹、配置文件以及路由约定。

单击文件和文件夹名称以了解有关每个约定的更多信息。

 顶级文件夹

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

Route segments to path segments

app  应用路由器
pages  页面路由器
public 要提供的静态资产
src 可选的应用程序源文件夹

 顶级文件

顶级文件用于配置应用程序、管理依赖项、运行中间件、集成监视工具以及定义环境变量。
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 的配置文件

app 路由约定

以下文件约定用于定义路由并处理 app 路由器中的元数据。

 路由文件
layout .js .jsx .tsx Layout
page .js .jsx .tsx Page
loading .js .jsx .tsx  加载用户界面
not-found .js .jsx .tsx  未找到用户界面
error .js .jsx .tsx  错误用户界面
global-error .js .jsx .tsx  全局错误用户界面
route .js .ts  API端点
template .js .jsx .tsx  重新渲染布局
default .js .jsx .tsx 并行路由后备页面

 嵌套路由
folder  航线段
folder/folder  嵌套路由段

 动态路线
[folder]  动态路段
[...folder]  包罗万象的路线段
[[...folder]] 可选的包罗万象的路线段

路由组和私人文件夹
(folder) 对路由进行分组而不影响路由
_folder 选择文件夹和所有子段不参与路由

并行和拦截的路线
@folder  命名槽
(.)folder  拦截同级
(..)folder 拦截上方一层
(..)(..)folder 拦截上面两层
(...)folder  从根拦截

元数据文件约定

 应用程序图标
favicon .ico  网站图标文件
icon .ico .jpg .jpeg .png .svg  应用程序图标文件
icon .js .ts .tsx  生成的应用程序图标
apple-icon .jpg .jpeg, .png  苹果应用程序图标文件
apple-icon .js .ts .tsx  生成的苹果应用程序图标

打开图谱和 Twitter 图片
opengraph-image .jpg .jpeg .png .gif  打开图形图像文件
opengraph-image .js .ts .tsx 生成的 Open Graph 图像
twitter-image .jpg .jpeg .png .gif  推特图像文件
twitter-image .js .ts .tsx  生成的 Twitter 图片

SEO
sitemap .xml  站点地图文件
sitemap .js .ts  生成的站点地图
robots .txt  机器人文件
robots .js .ts  生成的机器人文件

pages 路由约定

以下文件约定用于定义 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 可选的包罗万象的路线段