Next.js有一套固定的文件结构,包括配置文件、资源文件、路由文件等。
根目录文件夹
| app | app路由目录 |
|---|
| pages | pages路由目录 |
| public | 静态资源目录 |
| src | 备用资源目录 |
根目录文件
| next.config.js | Next.js配置文件 |
|---|
| package.json | 项目依赖 |
| instrumentation.ts | OpenTelemetry and Instrumentation file |
| middleware.ts | 中间件配置文件 |
| .env | 环境变量 |
| .env.local | 本地环境变量 |
| .env.production | 生产环境变量 |
| .env.development | 开发环境变量 |
| .eslintrc.json | ESLint配置文件 |
| .gitignore | Git忽略文件配置 |
| next-env.d.ts | 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 | 404页 |
| error | .js .jsx .tsx | 错误页 |
| global-error | .js .jsx .tsx | 全局错误页 |
| route | .js .ts | API endpoint |
| template | .js .jsx .tsx | 默认模板文件,功能与layout相似,但路由更新时template会重新加载。 |
| default | .js .jsx .tsx | 默认fallback |
路由嵌套
| folder | 根目录 |
|---|
| folder/folder | 路由嵌套 |
动态路由
| [folder] | 根目录 |
|---|
| [...folder] | 匹配所有 |
| [[...folder]] | 半匹配 |
路由组和私有路由