约定即配置

什么是 App 路由

此前的 Next.js 使用的是 Pages 路由，即所有路由都放在 pages/ 目录。新版的 Next.js 推出了 App路由，即所有路由都放在了 app/ 目录。当然，两者还是存在一些区别的，而不是单单只是存放路由的目录不同而已。

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 文件

本专题代码位于AxumCourse/nextjs-app-router仓库。