Next.js 的路由为什么这么奇怪？
Next.js 是 React 的全栈框架，主打服务端渲染，也就是 SSR（Server Side Rendering）。
它有一套非常强大但也很奇怪的路由机制。
这套路由机制是什么样的？为什么又说很奇怪呢？
我们试一下就知道了。
先创建个 Next.js 项目：
npx create-next-app@latest
执行 create-next-app，输入一些信息，Next.js 项目就创建好了。
进入项目，执行 npm run dev，把它跑起来：
浏览器访问可以看到这个页面，就代表跑成功了：
在项目下可以看到 src 下有个 app 目录，下面有 page.tsx：
我们添加几个目录：
guang/liu/page.tsx
export default function Liu() {
return <div>666</div>
}
guang/shuai/page.tsx
export default function Shuai() {
return <div>帅</div>
}
然后浏览器访问下：
可以看到，添加了几个目录，就自动多了几个对应的路由。
这就是 Next.js 的基于文件系统的路由。
刚学了 page.tsx 是定义页面的，那如果多个页面有公共部分呢？
比如这种菜单和导航：
肯定不是每个页面一份。
这种定义在 layout.tsx 里。
app/layout.tsx 是定义最外层的布局：
也就是 html 结构，还有 title、description 等信息：
在网页的 html 源码里可以看到这些：
我们改一下试试：
不止是根路由可以定义 layout，每一级都可以：
export default function Layout({
children,
}: {
children: React.ReactNode
}) {
return (
<div>
<div>
左侧菜单
</div>
<div>{children}</div>
</div>
)
}
我们给 guang/shuai 这个页面添加了布局，效果是这样的：
Next.js 会自动在 page.tsx 组件的外层包裹 layout.tsx 组件。
有的同学可能会注意到有个渐变背景，这个是 global.css 里定义的，我们把它去掉：
然后继续看：
我们可以使用 Link 组件在不同路由之间导航：
有的同学说，这些都很正常啊。
那接下来看点不那么正常的：
如果我希望定义 /dong/111/xxx/222 （111、222 是路径里的参数）这样的路由的页面呢？
应该如何写？
这样：
interface Params {
params: {
param1: string;
param2: string;
}
}
export default function Xxx(
{ params }: Params
) {
return <div>
<div>xxx</div>
<div>参数：{JSON.stringify(params)}</div>
</div>
}
路径中的参数的部分使用 [xxx] 的方式命名。
Next 会把路径中的参数取出来传入组件里：
这种叫做动态路由。
那如果我希望 /dong2/a/b/c 和 /dong2/a/d/e 都渲染同一个组件呢？
这样写：
interface Params {
params: {
dong: string;
}
}
export default function Dong2(
{ params }: Params
) {
return <div>
<div>dong2</div>
<div>参数：{JSON.stringify(params)}</div>
</div>
}
[...dong] 的语法就是用来定义任意层级路由的，叫做 catch-all 的路由。
可以看到，/dong2 下的任意的路由，都会渲染这个组件。
那我直接访问 /dong2 呢？
可以看到，404 了。
但这种也可以支持，再加一个中括号，改成 [[...dong]] 就好了：
这样 /dong2 也会渲染这个组件，只不过参数是空：
这种 [[...dong]] 的路由叫做 optional catch-all。
可以看到，Next.js 项目的目录可不只是单纯的目录，都是有对应的路由含义的。
那如果我就是想加个单纯的目录，不包括在路由里呢？
这样写：
我在 dong 和 dong2 的外层添加了一个 (dongdong) 的目录，那之前的路由会变么？
试了下，依然没变。
也就是说只要在目录名外加上个 ()，就不计入路由，只是分组用的，这叫做路由组。
现在，我们一个 layout 下渲染了一个 page。
那如果我想一个 layout 渲染多个 page 呢？
这样写：
guang2 下有 3 个 page，page.tsx、@aaa/page.tsx、@bbb/page.tsx
分别会以 children、aaa、bbb 的参数传入 layout.tsx
layout.tsx
export default function Layout({
children,
aaa,
bbb
}: {
children: React.ReactNode,
aaa: React.ReactNode,
bbb: React.ReactNode
}) {
return (
<div>
<div>{children}</div>
<div>{aaa}</div>
<div>{bbb}</div>
</div>
)
}
page.tsx
export default function Page() {
return <div>page</div>
}
@aaa/page.tsx
export default function Aaa() {
return <div>aaa</div>
}
@bbb/page.tsx
export default function Bbb() {
return <div>bbb</div>
}
渲染出来是这样的：
可以看到，在 layout 里包含了 3 个 page 的内容，都渲染出来了，这种叫做平行路由。
有的同学会问，那 /guang2/@aaa 可以访问么？
是不可以的。
此外，Next.js 还有一个很强大的路由机制：
之前有这样一个路由：
我们在它平级定义个路由：
import Link from "next/link";
export default function Ccc() {
return <div>
<div>
<Link href="/guang/liu">to 666</Link>
</div>
<div>ccc</div>
</div>
}
点击链接跳转到 /guang/liu
这没啥问题。
但如果我在 ccc 下加一个 (..)liu 的目录：
这时候再试一下：
可以看到，这次渲染的 Liu 组件就被替换了，但要是刷新的话还是之前的组件。
很多同学会有疑惑，这个有啥用？
举个场景的例子就明白了。
比如一个表格，点击每个条目，都会跳出编辑弹窗，这个编辑页面可以分享，分享出去打开的是完整的编辑页面。
再比如登录，一些页面点击登录会弹出登录弹窗，但如果把这个登录链接分享出去，打开的是完整的登录页面。
也就是说在不同场景下，可以重写这个 url 渲染的组件，这个就是拦截路由的用处。
用法也很简单，因为要拦截的是上一级的 /guang/liu 的路由，所以前面就要加一个 (..)
同理，还有 (.)xx 代表拦截当前目录的路由，(..)(..)xx 拦截上一级的上一级的路由，(...)xxx 拦截根路由。
这个拦截路由，在特定场景下很有用。
这些就是页面相关的路由机制，是不是还挺强大的？
当然，这些路由机制不只是页面可以用，Next.js 还可以用来定义 Get、Post 等接口。
只要把 page.tsx 换成 route.ts 就好了：
import { NextResponse, type NextRequest } from 'next/server'
const data: Record<string, any> = {
1: {
name: 'guang',
age: 20
},
2: {
name: 'dong',
age: 25
}
}
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url)
const id = searchParams.get('id');
return NextResponse.json(!id ? null : data[id])
}
我们定义了 /guang3 的路由对应的 get 方法，根据 id 来取数据。
访问下：
前面学的那些路由，都可以用来 route.ts 上。
比如这样：
[id] 定义动态路由参数，而 [...yyy] 是匹配任意的路由。
route.ts 的 GET 方法里，同样是通过 params 来取：
import { NextResponse, type NextRequest } from 'next/server'
interface Params {
params: {
id: string;
yyy: string;
}
}
export async function GET(request: NextRequest, {
params
}: Params) {
return NextResponse.json({
id: params.id,
yyy: params.yyy
})
}
感受到为啥 Next.js 被叫做全栈框架，而不是 SSR 框架了么？
因为它除了可以用来渲染 React 组件外，还可以定义接口。
这样，我们就把 Next.js 的路由机制过了一遍。
这种路由机制叫做 app router，也就是最顶层是 app 目录：
之前还有种 page router，最顶层目录是 page。
这俩只不过是两种文件、目录命名规则而已，我们只学 app router 就好了，它是最新的路由机制。
总结下我们学了什么：
aaa/bbb/page.tsx 可以定义 /aaa/bbb 的路由。
aaa/[id]/bbb/[id2]/page.tsx 中的 [id] 是动态路由参数，可以在组件里取出来。
aaa/[...xxx]/page.tsx 可以匹配 /aaa/xxx/xxx/xxx 的任意路由，叫做 catch-all 的动态路由。但它不匹配 /aaa
aaa/[[...xxx]]/page.tsx 同上，但匹配 /aaa，叫做 optional catch-all 的动态路由。
aaa/(xxx)/bbb/page.tsx 中的 (xxx) 只是分组用，不参与路由，叫做路由组
aaa/@xxx/page.tsx 可以在 layout.tsx 里引入多个，叫做平行路由
aaa/(..)/bbb/page.js 可以拦截 /bbb 的路由，重写对应的组件，但是刷新后依然渲染原组件，叫做拦截路由。
这些路由机制确实看起来挺奇怪的，它会导致 Next.js 的项目看起来这样：
相比这种基于文件系统的路由，大家可能更熟悉 React Router 那种编程式路由：
Next.js 这种声明式的路由其实熟悉了还是很方便的。
不需要单独再维护路由了，目录就是路由，一目了然。
而且这些看似奇怪的语法，细想一下也很正常：
比如 [xxx]，一般匹配 url 中的参数都是这种语法。
而 [...xxx] 只是在其中加个一个 ...，这个 ... 在 js 里就是任意参数的意思，所以用来匹配任意路由。
再加一个中括号 [[...xxx]] 代表可以不带参数，这个也是很自然的设计。
(.)xx、(..)xxx 这里的 . 和 .. 本来就是文件系统里的符号，用来做拦截路由也挺自然的。
路由组 (xxx) 加了个括号来表示分组，平行路由 @xxx 加了 @ 来表示可以引入多个 page，都是符合直觉的设计。
所以说，Next.js 基于文件系统实现这套路由机制，用的这些奇怪的语法，其实都是挺合理的设计。
总结
我们学习了 Next.js 的路由机制，它是基于文件系统来定义接口或页面的路由。
Next.js 的路由机制挺强大的，支持的功能很多。
比如这样：
有动态路由参数 [xx]、catch-all 的动态路由 [...xxx]、optional catch-all 的动态路由 [[...xxx]]、路由组 (xxx)、平行路由 @xxx、拦截路由 (..)xxx。
这些语法乍看比较奇怪，但是细想一下，都是挺合理的设计。