本章我们来看一下 create-next-app 的选项、目录结构以及 Next.js 的「约定即配置」。
什么是 App 路由
create-next-app 选项
本专题使用 yarn create next-app 来创建 Next.js 项目，它底层调用的也是 create-next-app 命令。
- 👉[1] ：给创建的项目设置名字，本例为
axum-rs-hello-nextjs-app-router - 👉[2]：是否使用 TypeScript，本例为
No（不使用） - 👉[3]：是否使用 ESLint，本例为
No（不使用） - 👉[4]：是否使用 Tailwind，本例为
No（不使用，需要的时候可以手动安装，并不复杂） - 👉[5]：是否使用
src目录，本例为No（不使用） - 👉[6]：是否使用 App 路由，本例为
Yes（使用） - 👉[7]：是否为
import定义别名，本例为No（不定义）
显而易见，本专题就是为了讲 App 路由，所以 👉[6] 肯定要选择 Yes。
目录结构
├── app
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.js
│ ├── page.js
│ └── page.module.css
├── jsconfig.json
├── next.config.js
├── package.json
├── public
│ ├── next.svg
│ └── vercel.svg
├── README.md
└── yarn.lock
app目录：项目的路由app/favicon.ico：偏好图标app/global.css：全局样式app/layout.js：应用程序的根布局（root layout）app/page.js：应用程序的“首页”（root page）app/page.module.css：应用程序“首页”的模块化样式
next.config.js：Next.js 配置文件public目录：公共静态资源
约定即配置
Next.js 的重大策略是：约定即配置，大部分功能都是通过约定而不是手动配置(比如手动修改next.config.js)来实现。其中最明显的就是路由系统。
Next.js 使用约定的文件/目录来实现路由：（以下文件/目录均在app/目录里面）
以下内容的
*.js可以是*.js/*.jsx/*.ts/*.tsx，为了简化描述，本专题统一以*.js进行描述。
路由文件
| 文件名 | 说明 |
|---|---|
layout.js | 布局文件 |
page.js | “首页” UI |
loading.js | “正在载入” UI |
not-found.js | “没有找到” UI |
error.js | 错误处理UI |
global-error.js | 全局错误处理UI |
route.js | api的路由定义 |
template.js | 模板文件 |
default.js | 并行路由的回调页面 |
嵌套路由
| 目录名 | 说明 | URL |
|---|---|---|
路由1 | 定义一个名为路由1的路由 | /路由1 |
路由1/子路由1 | 定义一个名为子路由1的路由，它的父路由是 路由1 | /路由1/子路由1 |
动态路由
| 目录名 | 说明 |
|---|---|
[axum-rs] | 定义一个动态路由 |
[...axum-rs] | 定义一个 Catch-All 动态路由 |
[[...axum-rs]] | 定义一个可选的 Catch-All 动态路由 |
路由分组
| 目录名 | 说明 |
|---|---|
(axum-rs) | 定义一个名为 axum-rs 的路由组 |
_axum-rs | 定义一个名为 axum-rs 私有目录，它及它的子路由都将无法访问 |
并行路由和路由拦截
| 目录名 | 说明 |
|---|---|
@axum-rs | 定义一个名为axum-rs 的命名插槽，以便用于并行路由。 |
(.)axum-rs | 拦截同级路由 |
(..)axum-rs | 拦截上级路由 |
(..)(..)axum-rs | 拦截上2级路由 |
(...)axum-rs | 拦截根路由 |
SEO
| 文件名 | 说明 |
|---|---|
sitemap.xml | 网站地图 |
sitemap.js或.ts | 生成网站地图 |
robots.txt | Robots 文件 |
robots.js或.ts | 生成 Robots 文件 |