约定即配置
本章我们来看一下 `create-next-app` 的选项、目录结构以及 Next.js 的「约定即配置」。定义路由
本章将讨论 Next.js 定义路由的方式,包括:普通路由、动态路由、嵌套路由及嵌套动态路由。布局
本章讨论 Next.js App 路由的布局。相比之前的 Pages 路由,App 路由的布局简单多了:Next.js 会自动调用布局文件。组件与渲染
本章讨论新版 Next.js 中变化最大的部分:组件和渲染。“正在载入”的实现
Next.js 的 App 路由有一个约定:定义 `loading.js`,那么 Next.js 会自动在页面加载中显示这个组件,加载完成之后,自动隐藏该组件。错误处理
本章将讨论 Next.js 的错误处理。
约定即配置
本章我们来看一下 create-next-app
的选项、目录结构以及 Next.js 的「约定即配置」。
什么是 App 路由
create-next-app
选项
本专题使用 yarn create next-app
来创建 Next.js 项目,它底层调用的也是 create-next-app
命令。
What is your project named? axum-rs-hello-nextjs-app-router 👉[1]
Would you like to use TypeScript with this project? No / Yes 👉[2]
Would you like to use ESLint with this project? No / Yes 👉[3]
Would you like to use Tailwind CSS with this project? No / Yes 👉[4]
Would you like to use `src/` directory with this project? No / Yes 👉[5]
Use App Router (recommended)? No / Yes 👉[6]
Would you like to customize the default import alias? No / Yes 👉[7]
- 👉[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
目录:公共静态资源
app/favicon.ico
:偏好图标app/global.css
:全局样式app/layout.js
:应用程序的根布局(root layout
)app/page.js
:应用程序的“首页”(root page
)app/page.module.css
:应用程序“首页”的模块化样式
约定即配置
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 | 拦截上2级路由 |
(...)axum-rs | 拦截根路由 |
SEO
文件名 | 说明 |
---|---|
sitemap.xml | 网站地图 |
sitemap.js或.ts | 生成网站地图 |
robots.txt | Robots 文件 |
robots.js或.ts | 生成 Robots 文件 |
本专题代码位于AxumCourse/nextjs-app-router仓库。