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