如何在Next.js中创建含多动态参数段的动态路由？

这种路由格式在Next.js中完全可行，下面针对不同路由系统（Pages Router / App Router）给出两种实用实现方案：

方案1：通过next.config.js配置重写规则（通用方案） #

这种方法可以把自定义格式的URL映射到标准动态路由，逻辑更清晰，也便于后续维护。

在项目根目录的next.config.js中添加重写规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        // 匹配product-xxx-xxx格式的URL
        source: '/product-:productId-:productName',
        // 重写到内部的详情页路由（可根据你的页面结构调整）
        destination: '/product/detail?productId=:productId&productName=:productName',
      },
    ];
  },
};

module.exports = nextConfig;

对应页面实现 #

• Pages Router：创建pages/product/detail.js，通过router.query获取参数：

import { useRouter } from 'next/router';

export default function ProductDetail() {
  const router = useRouter();
  const { productId, productName } = router.query;

  if (!productId || !productName) return <div>加载中...</div>;

  return (
    <div>
      <h2>商品名称：{productName}</h2>
      <p>商品ID：{productId}</p>
    </div>
  );
}

• App Router：创建app/product/detail/page.js，通过searchParams获取参数：

export default function ProductDetail({ searchParams }) {
  const { productId, productName } = searchParams;

  if (!productId || !productName) return <div>加载中...</div>;

  return (
    <div>
      <h2>商品名称：{productName}</h2>
      <p>商品ID：{productId}</p>
    </div>
  );
}

方案2：使用Catch-All动态路由 + 正则解析 #

如果不想配置重写规则，可以直接用Next.js的Catch-All动态路由，通过正则从URL中提取参数。

Pages Router实现 #

在pages目录下创建[...productSlug].js：

import { useRouter } from 'next/router';

export default function ProductPage() {
  const router = useRouter();
  const { productSlug } = router.query;

  // 处理路由加载状态
  if (!productSlug) return <div>加载中...</div>;

  // 提取完整的路由段（比如访问/product-1-applewatch，productSlug[0]就是"product-1-applewatch"）
  const slug = productSlug[0];
  // 用正则匹配并提取productId和productName
  const matchResult = slug.match(/^product-(\d+)-(.+)$/);
  
  // 非法URL处理
  if (!matchResult) return <div>无效的商品链接</div>;

  const [, productId, productName] = matchResult;

  return (
    <div>
      <h2>商品名称：{productName}</h2>
      <p>商品ID：{productId}</p>
    </div>
  );
}

App Router实现 #

在app目录下创建[...productSlug]/page.js：

export default function ProductPage({ params }) {
  const { productSlug } = params;

  if (!productSlug?.length) return <div>加载中...</div>;

  const slug = productSlug[0];
  const matchResult = slug.match(/^product-(\d+)-(.+)$/);

  if (!matchResult) return <div>无效的商品链接</div>;

  const [, productId, productName] = matchResult;

  return (
    <div>
      <h2>商品名称：{productName}</h2>
      <p>商品ID：{productId}</p>
    </div>
  );
}

静态生成（可选） #

如果需要对这些商品页面做静态生成（SSG）：

• Pages Router：在页面文件中添加getStaticPaths和getStaticProps，提前生成所有商品对应的URL路径。
• App Router：在page.js同级添加generateStaticParams函数，返回所有商品的路由参数组合。

内容的提问来源于stack exchange，提问作者saman samadi