Next.js项目结构
本页面提供了 Next.js 项目文件和文件夹结构的概览。它涵盖了顶层文件和文件夹、配置文件以及在 app 和 pages目录中的路由约定。
顶层目录结构
| 目录 |
描述 |
app |
App 路由 |
pages |
Pages 路由 |
public |
静态资源 |
src |
可选的应用程序源代码文件夹 |
顶层文件
| 文件 |
描述 |
| 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 路由约定
路由文件
| 文件/文件夹 |
类型 |
描述 |
| 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 |
并行路由回退页面 |
嵌套路由
| 文件夹 |
描述 |
folder |
路由片段 |
folder/folder |
嵌套的路由片段 |
动态路由
| 文件夹 |
描述 |
[folder] |
动态路由片段 |
[...folder] |
全匹配路由片段 |
[[...folder]] |
可选的全匹配路由片段 |
