编辑“︁Next.js动态路由”︁（章节）

= Next.js动态路由 =

== 介绍 ==
Next.js的动态路由（Dynamic Routing）是一种允许开发者根据URL参数动态生成页面的机制。它通过文件名或目录名中的方括号（<code>[param]</code>）来定义动态路径段，使得页面能够根据传入的参数动态渲染内容。动态路由非常适合处理博客文章、产品详情页或用户个人资料等需要动态数据的场景。

在传统的静态路由中，每个URL对应一个固定的页面，而动态路由则允许开发者使用相同的页面模板，根据不同的URL参数动态加载数据并渲染页面。

== 基本语法 ==
Next.js的动态路由通过在<code>pages</code>目录下创建带有方括号的文件或文件夹来实现。以下是两种常见的动态路由定义方式：

1. '''单参数动态路由'''：文件名或目录名使用<code>[param]</code>格式。
2. '''多参数动态路由'''：文件名或目录名使用<code>[...param]</code>格式（捕获所有路径）或<code>[[...param]]</code>格式（可选捕获所有路径）。

=== 单参数动态路由 ===
以下是一个单参数动态路由的示例，假设我们需要根据文章ID动态加载博客文章：

<syntaxhighlight lang="javascript">
// pages/posts/[id].js

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <div>Post ID: {id}</div>;
}
</syntaxhighlight>

当用户访问<code>/posts/123</code>时，页面会显示：
<pre>Post ID: 123</pre>

=== 多参数动态路由 ===
多参数动态路由允许匹配更复杂的URL结构。例如，捕获所有后续路径：

<syntaxhighlight lang="javascript">
// pages/shop/[...slug].js

import { useRouter } from 'next/router';

export default function Shop() {
  const router = useRouter();
  const { slug } = router.query;

  return <div>Shop path: {slug.join('/')}</div>;
}
</syntaxhighlight>

当用户访问<code>/shop/category/product/123</code>时，<code>slug</code>将是一个数组<code>['category', 'product', '123']</code>，页面显示：
<pre>Shop path: category/product/123</pre>

== 获取动态参数 ==
Next.js提供了两种主要方式获取动态路由参数：
1. '''<code>useRouter</code> Hook'''（客户端渲染）
2. '''<code>getStaticProps</code> 和 <code>getServerSideProps</code>'''（服务端渲染）

=== 使用 useRouter ===
<code>useRouter</code>是React Hook，适用于客户端渲染：

<syntaxhighlight lang="javascript">
import { useRouter } from 'next/router';

function Product() {
  const router = useRouter();
  const { pid } = router.query; // pid来自URL，如/products/[pid]

  return <p>Product ID: {pid}</p>;
}
</syntaxhighlight>

=== 使用 getStaticProps 和 getServerSideProps ===
对于服务端渲染，可以在数据获取函数中访问参数：

<syntaxhighlight lang="javascript">
// pages/products/[pid].js

export async function getStaticProps(context) {
  const { pid } = context.params;
  // 根据pid获取产品数据
  return { props: { product } };
}

export async function getStaticPaths() {
  // 返回所有可能的pid值
  return {
    paths: [{ params: { pid: '1' } }, { params: { pid: '2' } }],
    fallback: false
  };
}

function Product({ product }) {
  return <div>{product.name}</div>;
}
</syntaxhighlight>

== 实际应用案例 ==
以下是一个博客系统的动态路由实现示例：

1. '''文件结构'''
<pre>
pages/
  posts/
    [id].js       # 单篇文章
    [...slug].js  # 分类/子分类
</pre>

2. '''文章页面实现'''
<syntaxhighlight lang="javascript">
// pages/posts/[id].js

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return { props: { post } };
}

export default function Post({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}
</syntaxhighlight>

== 高级用法 ==
=== 可选捕获所有路由 ===
使用双括号语法<code>[[...slug]]</code>可以使动态路由变为可选：

<syntaxhighlight lang="javascript">
// pages/docs/[[...slug]].js

// 匹配：
// /docs
// /docs/feature1
// /docs/feature1/concept1
</syntaxhighlight>

=== 路由优先级规则 ===
Next.js按照以下顺序匹配路由：
1. 预定义路由（如<code>pages/post/create.js</code>）
2. 动态路由（如<code>pages/post/[pid].js</code>）
3. 捕获所有路由（如<code>pages/post/[...slug].js</code>）

== 可视化路由匹配 ==
<mermaid>
graph TD
    A[URL] --> B{匹配静态路由?}
    B -->|是| C[使用静态路由]
    B -->|否| D{匹配动态路由?}
    D -->|是| E[使用动态路由]
    D -->|否| F{匹配捕获所有路由?}
    F -->|是| G[使用捕获所有路由]
    F -->|否| H[404页面]
</mermaid>

== 常见问题 ==
1. '''为什么我的动态路由不工作？'''
   - 确保文件名使用正确的方括号语法
   - 检查是否同时存在冲突的静态路由

2. '''如何在构建时生成所有可能的路径？'''
   - 使用<code>getStaticPaths</code>返回所有可能的参数组合

3. '''动态路由会影响SEO吗？'''
   - 不会，只要正确实现服务端渲染或静态生成

== 总结 ==
Next.js的动态路由系统提供了强大的URL处理能力，允许开发者：
* 创建灵活的URL结构
* 使用相同的组件处理不同内容
* 支持静态生成和服务端渲染
* 实现复杂的路由匹配逻辑

通过合理使用动态路由，可以大大简化具有大量动态内容页面的开发工作。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js路由系统]]