从0死磕全栈之Next.js App Router动态路由详解：从入门到实战

Next.js 是基于 React 的全栈框架，其动态路由功能让我们能轻松构建支持参数化 URL 的页面（比如用户详情页 /users/123、商品详情页 /products/shoes）。本文基于 Next.js App Router（app/ 目录），通过简单易懂的方式，带你掌握动态路由的核心用法。

---

一、动态路由的基本概念

在 Next.js 中，动态路由指的是页面路径中包含可变参数（如 id、slug 等），通过这些参数可以渲染不同的内容。例如：

• /users/[id] → 对应用户 ID 为 1、2、3… 的详情页
• /posts/[slug] → 对应文章别名为 hello-world、nextjs-guide… 的详情页

💡 什么是 slug？
Slug 是内容的友好 URL 别名（如 nextjs-guide），用于替代生硬的 ID。例如将文章标题“如何学习 Next.js”转为 URL 路径：how-to-learn-nextjs。

---

二、App Router 中的动态路由写法

1. 文件命名规则

在 app 目录下，动态参数用方括号 [ ] 作为文件夹名，页面文件必须命名为 page.tsx（或 page.js）：

• 单参数页面：app/users/[id]/page.tsx → 访问 /users/123 时，id = '123'
• 多参数页面：app/posts/[category]/[slug]/page.tsx → 访问 /posts/tech/nextjs-guide 时，参数为 { category: 'tech', slug: 'nextjs-guide' }

✅ 关键区别：
Pages Router 是 pages/users/[id].tsx，而 App Router 是 app/users/[id]/page.tsx。

---

三、获取动态路由参数

在 App Router 中，动态参数通过 params 对象传入页面组件（无需 Hook）：

示例：用户详情页

// app/users/[id]/page.tsx
export default async function UserDetail({ params }: { params: { id: string } }) {const { id } = await params; // id 类型为 string// 模拟从 API 获取用户数据（服务端执行！）const res = await fetch(`https://jsonp