Next.js 项目结构

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

顶级文件夹

文件夹名	描述
app	App Router
pages	Pages Router
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	APP 端点
template	.js .jsx .tsx	重新渲染布局
default	.js .jsx .tsx	并行路由回退页面

嵌套路由

路径	描述
folder	路由段
folder/folder	嵌套路线段

动态路由

文件夹名	描述
[folder]	动态路由段
[...folder]	捕捉所有路由段
[[...folder]]	可选的捕捉所有路由段

路由组和私有文件夹

文件夹名	描述
(folder)	在不影响路由的情况下分组路由
_folder	选择文件夹和所有子段暴漏路由

平行和拦截路线

文件夹名	描述
@folder	命名插槽
(.)folder	拦截同级
(..)folder	拦截上一级
(..)(..)folder	拦截上两级
(...)folder	从根开始拦截

元数据文件约定

App 图标

文件名	文件类型	描述
favicon	.ico	图标文件
icon	.ico .jpg .jpeg .png .svg	App 图标文件
icon	.js .ts .tsx	生成的 App 图标
apple-icon	.jpg .jpeg .png	苹果 App 图标文件
apple-icon	.js .ts .tsx	生成的苹果 App 图标

开放图谱和推特图像

文件名	文件类型	描述
opengraph-image	.jpg .jpeg .png .gif	开放图谱图像文件
opengraph-image	.js .ts .tsx	生成的开放图图像
twitter-image	.jpg jpeg .png .gif	推特图像文件
twitter-image	.js .ts .tsx	生成的推特图片

搜索引擎优化（SEO）

文件名	文件类型	描述
sitemap	.xml	站点地图文件
sitemap	.js .ts	生成的站点地图
robots	.txt	Robots 文件
robots	.js .ts	生成的 Robots 文件

pages 路由约定

特殊文件

文件名	文件类型	描述
_app	.js .jsx .tsx	自定义 App
_document	.js .jsx .tsx	自定义 Document
_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	可选的捕获所有路由段