Next.js 项目结构
本文概述了 Next.js 应用程序的项目结构，涵盖顶级文件与文件夹、配置文件，以及 app 和 pages 目录中的路由约定。
点击文件或文件夹名称可了解每个约定的详细信息。
顶级文件夹
顶级文件夹用于组织应用程序代码和静态资源。
顶级文件
顶级文件用于配置应用程序、管理依赖项、运行中间件、集成监控工具以及定义环境变量。
| Next.js | |
next.config.js | Next.js 配置文件 |
package.json | 项目依赖项与脚本 |
instrumentation.ts | OpenTelemetry 与性能监控文件 |
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 | 布局文件 |
page | .js .jsx .tsx | 页面文件 |
loading | .js .jsx .tsx | 加载状态 UI |
not-found | .js .jsx .tsx | 404 页面 UI |
error | .js .jsx .tsx | 错误页面 UI |
global-error | .js .jsx .tsx | 全局错误页面 UI |
route | .js .ts | API 端点 |
template | .js .jsx .tsx | 可重新渲染的布局 |
default | .js .jsx .tsx | 并行路由的备用页面 |
嵌套路由
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 应用图标文件 |
apple-icon | .js .ts .tsx | 动态生成的 Apple 应用图标 |
Open Graph 与 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
pages 路由约定
以下文件约定用于在 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 | 可选全捕获路由段 |