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 | 可选的捕获所有路由段 |
