Next.js动态路由[编辑 | 编辑源代码]

介绍[编辑 | 编辑源代码]

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

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

基本语法[编辑 | 编辑源代码]

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

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

单参数动态路由[编辑 | 编辑源代码]

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

// 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>;
}

当用户访问/posts/123时，页面会显示：

Post ID: 123

多参数动态路由[编辑 | 编辑源代码]

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

// 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>;
}

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

Shop path: category/product/123

获取动态参数[编辑 | 编辑源代码]

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

使用 useRouter[编辑 | 编辑源代码]

useRouter是React Hook，适用于客户端渲染：

import { useRouter } from 'next/router';

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

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

使用 getStaticProps 和 getServerSideProps[编辑 | 编辑源代码]

对于服务端渲染，可以在数据获取函数中访问参数：

// 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>;
}

实际应用案例[编辑 | 编辑源代码]

以下是一个博客系统的动态路由实现示例：

1. 文件结构

pages/
  posts/
    [id].js       # 单篇文章
    [...slug].js  # 分类/子分类

2. 文章页面实现

// 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>
  );
}

高级用法[编辑 | 编辑源代码]

可选捕获所有路由[编辑 | 编辑源代码]

使用双括号语法...slug可以使动态路由变为可选：

// pages/docs/[[...slug]].js

// 匹配：
// /docs
// /docs/feature1
// /docs/feature1/concept1

路由优先级规则[编辑 | 编辑源代码]

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

可视化路由匹配[编辑 | 编辑源代码]

常见问题[编辑 | 编辑源代码]

1. 为什么我的动态路由不工作？

  - 确保文件名使用正确的方括号语法
  - 检查是否同时存在冲突的静态路由

2. 如何在构建时生成所有可能的路径？

  - 使用getStaticPaths返回所有可能的参数组合

3. 动态路由会影响SEO吗？

  - 不会，只要正确实现服务端渲染或静态生成

总结[编辑 | 编辑源代码]

Next.js的动态路由系统提供了强大的URL处理能力，允许开发者：

创建灵活的URL结构
使用相同的组件处理不同内容
支持静态生成和服务端渲染
实现复杂的路由匹配逻辑

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