如何在Next.js中实现三级分类+产品ID的动态路由？

需求说明 #

需要为产品生成分类slug/子分类slug/子子分类slug/产品ID格式的动态URL，例如示例产品对应的/category-a/subcategory-a1/sub-subcategory-a1-1/123。

实现步骤 #

1. 编写Slug转换函数

首先需要将分类名称转换为符合URL规范的slug（小写、空格转连字符）：

function slugify(text) {
  return text
    .toLowerCase()
    .replace(/\s+/g, '-')
    .replace(/[^\w\-]+/g, '')
    .replace(/\-\-+/g, '-')
    .trim();
}

2. 构建分类ID到Slug的映射表

为避免每次查找都遍历嵌套数组，提前预处理分类数据，构建ID与对应slug的映射：

// 构建子子分类映射（key: subsubcategory_id，value: 三级分类的slug集合）
const subsubcategoryMap = {};

categories.forEach(category => {
  const categorySlug = slugify(category.name);
  category.subcategories.forEach(subcategory => {
    const subcategorySlug = slugify(subcategory.name);
    subcategory.subsubcategories.forEach(subsubcategory => {
      const subsubcategorySlug = slugify(subsubcategory.name);
      subsubcategoryMap[subsubcategory.id] = {
        categorySlug,
        subcategorySlug,
        subsubcategorySlug
      };
    });
  });
});

3. 生成单个产品的完整路径

通过产品的ID字段，从映射表中获取对应slug，拼接成目标路径：

function getProductPath(product) {
  const { categorySlug, subcategorySlug, subsubcategorySlug } = subsubcategoryMap[product.subsubcategory_id];
  return `/${categorySlug}/${subcategorySlug}/${subsubcategorySlug}/${product.id}`;
}

// 示例用法
const sampleProduct = products[0];
console.log(getProductPath(sampleProduct)); // 输出: /category-a/subcategory-a1/sub-subcategory-a1-1/123

4. Next.js动态路由与静态生成配置

在pages目录下创建嵌套动态路由文件：[category]/[subcategory]/[subsubcategory]/[productId].js，实现页面的静态生成：

// pages/[category]/[subcategory]/[subsubcategory]/[productId].js
import { useRouter } from 'next/router';

export default function ProductPage({ product }) {
  const router = useRouter();
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
      <p>{product.description}</p>
    </div>
  );
}

export async function getStaticPaths() {
  // 生成所有产品的路径参数
  const paths = products.map(product => {
    const { categorySlug, subcategorySlug, subsubcategorySlug } = subsubcategoryMap[product.subsubcategory_id];
    return {
      params: {
        category: categorySlug,
        subcategory: subcategorySlug,
        subsubcategory: subsubcategorySlug,
        productId: product.id.toString()
      }
    };
  });

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // 根据productId查找对应产品
  const product = products.find(p => p.id.toString() === params.productId);
  return { props: { product } };
}

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