本页概述了 Next.js 项目的文件和文件夹结构。它包括顶层文件和文件夹、配置文件以及应用程序和页面目录中的路由约定。
顶层文件夹
app | App Router |
pages | Pages Router |
public | 静态资源 |
src | 可选的 src 文件夹 |
顶层文件
| Next.js | |
| next.config.js | Next.js 配置文件 |
| package.json | 项目依赖和脚本 |
| instrumentation.ts | OpenTelemetry and Instrumentation file |
| 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 配置文件 |
| postcss.config.js | Tailwind CSS 配置文件 |
app 路由约定
路由文件
layout | .js .jsx .tsx | 布局 |
page | .js .jsx .tsx | 页面 |
loading | .js .jsx .tsx | 加载页面 |
not-found | .js .jsx .tsx | 404 页面 |
error | .js .jsx .tsx | 错误 页面 |
global-error | .js .jsx .tsx | 全局 页面 |
route | .js .ts | API endpoint |
template | .js .jsx .tsx | 重新渲染的布局 |
default | .js .jsx .tsx | 并行路由回退页面 |
嵌套路由
| folder | 路由段 |
| folder/folder | 嵌套路由段 |
动态路由
| [folder] | 动态路由段 |
| [...folder] | 全匹配路由段 |
| [[...folder]] | 可选全匹配路由段 |
路由分组和私有文件夹
| (folder) | 对路由进行分组而不影响路由本身 |
| _folder | 将文件夹和所有子段标记为私有的,不参与路由匹配 |
并行和拦截路由
@folder | 命名插槽 |
(.)folder | 拦截同级路由 |
(..)folder | 拦截上一级路由 |
(..)(..)folder | 拦截上两级路由 |
(...)folder | 从根路由开始拦截 |
Metadata 文件约定
应用图标
| favicon | .ico | 网站图标文件 |
| icon | .ico .jpg .jpeg .png .svg | 应用图标文件 |
| icon | .js .ts .tsx | 生成的应用图标文件 |
| apple-icon | .jpg .jpeg, .png | Apple 应用图标文件 |
| apple-icon | .js .ts .tsx | 生成的 Apple 应用图标文件 |
Open Graph and Twitter 图片
| opengraph-image | .jpg .jpeg .png .gif | Open Graph 图片文件 |
| opengraph-image | .js .ts .tsx | 生成的 Open Graph 图片文件 |
| twitter-image | .jpg .jpeg .png .gif | Twitter 图片文件 |
| twitter-image | .js .ts .tsx | 生成的 Twitter 图片文件 |
SEO
| sitemap | .xml | Sitemap 文件 |
| sitemap | .js .ts | 生成的 Sitemap 文件 |
| 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 | 可选全捕获路由段 |