Next.js工程结构

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

顶级文件夹

app	应用路由器
pages	页面路由器
public	提供服务的公共静态资产
src	可选的应用程序源文件目录

顶级文件

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路由约定

layout	.js .jsx .tsx	布局
page	.js .jsx .tsx	页面
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	从根拦截

元数据文件约定

App Icons

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	生成开放式图形图像
twitter-image	.jpg .jpeg .png .gif	Twitter的图像文件
twitter-image	.js .ts .tsx	生成的Twitter图像文件

SEO

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

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	可选的捕获所有的路由段