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

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

 顶级文件夹

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

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 可选的包罗万象的路线段