项目结构
本页面提供了 Next.js 应用的项目结构概况。它包含顶级文件和文件夹、配置文件及app和pages目录的路由约定。
顶级文件夹
使用顶级文件夹来组织您的应用代码和静态文件。
app | App 路由器 |
pages | Pages 路由器 |
public | 用于存储静态文件 |
src | 可选的应用程序源文件夹 |
顶级文件
使用顶级文件来配置您的应用、管理依赖、运行中间件、集成监控工具和定义环境变量。
| Next.js | |
next.config.js | Next.js 的配置文件 |
package.json | 项目依赖和脚本 |
instrumentation.ts | OpenTelemetry and 设备文件 |
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 路由约定
The following file conventions are used to define routes and handle metadata in the app router.
使用以下文件约定来定义路由 和处理 metadata 在app路由器中。
路由文件
layout | .js .jsx .tsx | 布局 |
page | .js .jsx .tsx | 页面 |
loading | .js .jsx .tsx | 加载中 UI |
not-found | .js .jsx .tsx | 未找到页面 UI |
error | .js .jsx .tsx | 错误 UI |
global-error | .js .jsx .tsx | 全局错误 UI |
route | .js .ts | API 断电 |
template | .js .jsx .tsx | 重新渲染布局 |
default | .js .jsx .tsx | 平行路由回退页面 |
嵌套路由
文件夹 | 路由段 |
文件夹/文件夹 | 嵌套路由段 |
动态路由
[文件夹] | 动态路由段 |
[...文件夹] | 捕获全部路由段 |
[[...文件夹]] | 可选的捕获全部路由段 |
路由组和私有文件夹
(文件夹) | 不影响路由的分组路由 |
_文件夹 | 将文件夹和所有子段从路由中选择出来 |
平行和拦截路由
@文件夹 | 命名插槽 |
(.)文件夹 | 拦截同级 |
(..)文件夹 | 拦截上一级 |
(..)(..)文件夹 | 拦截上两级 |
(...)文件夹 | 从根拦截 |
元数据文件约定
应用图标
favicon | .ico | Favicon 文件 |
icon | .ico .jpg .jpeg .png .svg | App Icon 文件 |
icon | .js .ts .tsx | 生成 App 图标 |
apple-icon | .jpg .jpeg, .png | Apple App 图标文件 |
apple-icon | .js .ts .tsx | 生成 Apple App 图标 |
Open Graph 和 Twitter 图像
opengraph-image | .jpg .jpeg .png .gif | 打开 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 路由约定
使用下列文件约定来定义pages 路由器的路由。
特殊文件
_app | .js .jsx .tsx | 自定义 App |
_document | .js .jsx .tsx | 自定义文档 |
_error | .js .jsx .tsx | 自定义错误页面 |
404 | .js .jsx .tsx | 404 错误页面 |
500 | .js .jsx .tsx | 500 错误页面 |
路由
| 文件夹约定 | ||
index | .js .jsx .tsx | 主页 |
文件夹/index | .js .jsx .tsx | 嵌套页面 |
| 文件约定 | ||
index | .js .jsx .tsx | 主页 |
文件 | .js .jsx .tsx | 嵌套页面 |
动态路由
| 文件夹约定 | ||
[文件夹]/index | .js .jsx .tsx | 动态路由段 |
[...文件夹]/index | .js .jsx .tsx | 获取所有路由段 |
[[...文件夹]]/index | .js .jsx .tsx | 可选的获取所有路由段 |
| 文件约定 | ||
[文件] | .js .jsx .tsx | 动态路由段 |
[...文件] | .js .jsx .tsx | 获取所有路由段 |
[[...文件]] | .js .jsx .tsx | 可选的获取所有路由段 |