Next.js多层嵌套动态路由及全静态站点导出方案咨询

当然可以实现这个需求，Next.js支持多层嵌套动态路由的静态生成，通过getStaticPaths和getStaticProps两个API配合就能完成纯静态站点的构建。以下是具体操作步骤：

1. 调整页面文件结构 #

首先补充缺失的product层级文件，最终结构如下：

pages
   catalog
      index.tsx
      [category]
         index.tsx
         [group]
            index.tsx
            [product]
               index.tsx

2. 为每个动态页面实现静态生成逻辑 #

每个动态路由页面都需要通过getStaticPaths定义所有可能的路径参数组合，再通过getStaticProps获取对应参数的数据。

（1）[category]/index.tsx 页面 #

// pages/catalog/[category]/index.tsx
export async function getStaticPaths() {
  // 替换为你获取所有分类的逻辑（比如从API、本地JSON读取）
  const categories = ['electronics', 'clothing', 'home'];
  
  const paths = categories.map(category => ({
    params: { category }
  }));

  return { paths, fallback: false }; // fallback设为false，仅预定义路径会被生成
}

export async function getStaticProps({ params }) {
  const { category } = params;
  // 替换为根据分类获取数据的逻辑
  const categoryData = await fetch(`/api/categories/${category}`).then(res => res.json());

  return {
    props: { categoryData }
  };
}

export default function CategoryPage({ categoryData }) {
  return (
    <div>
      <h1>{categoryData.name}</h1>
      <p>{categoryData.description}</p>
    </div>
  );
}

（2）[group]/index.tsx 页面 #

此页面需要同时接收category和group两个参数：

// pages/catalog/[category]/[group]/index.tsx
export async function getStaticPaths() {
  // 替换为获取所有分类-分组组合的逻辑
  const categoryGroups = [
    { category: 'electronics', groups: ['phones', 'laptops'] },
    { category: 'clothing', groups: ['men', 'women'] },
    { category: 'home', groups: ['furniture', 'decor'] }
  ];

  const paths = categoryGroups.flatMap(({ category, groups }) => 
    groups.map(group => ({
      params: { category, group }
    }))
  );

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const { category, group } = params;
  // 替换为根据分类+分组获取数据的逻辑
  const groupData = await fetch(`/api/categories/${category}/groups/${group}`).then(res => res.json());

  return {
    props: { groupData }
  };
}

export default function GroupPage({ groupData }) {
  return (
    <div>
      <h1>{groupData.name}</h1>
      <ul>{groupData.items.map(item => <li key={item.id}>{item.name}</li>)}</ul>
    </div>
  );
}

（3）[product]/index.tsx 页面 #

此页面需要接收category、group、product三个参数：

// pages/catalog/[category]/[group]/[product]/index.tsx
export async function getStaticPaths() {
  // 替换为获取所有分类-分组-产品组合的逻辑
  const productPaths = [
    { category: 'electronics', group: 'phones', product: 'iphone-15' },
    { category: 'electronics', group: 'phones', product: 'samsung-s24' },
    { category: 'clothing', group: 'men', product: 'casual-tshirt' }
  ];

  const paths = productPaths.map(item => ({
    params: {
      category: item.category,
      group: item.group,
      product: item.product
    }
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const { category, group, product } = params;
  // 替换为根据分类+分组+产品ID获取数据的逻辑
  const productData = await fetch(`/api/categories/${category}/groups/${group}/products/${product}`).then(res => res.json());

  return {
    props: { productData }
  };
}

export default function ProductPage({ productData }) {
  return (
    <div>
      <h1>{productData.name}</h1>
      <p>价格：{productData.price}</p>
      <p>{productData.detail}</p>
    </div>
  );
}

3. 执行静态导出 #

在项目根目录运行以下命令：

next build && next export

执行完成后，out文件夹会生成对应路由结构的静态HTML文件，示例结构如下：

out
   catalog
      index.html
      electronics
         index.html
         phones
            index.html
            iphone-15
               index.html
            samsung-s24
               index.html
      clothing
         index.html
         men
            index.html
            casual-tshirt
               index.html

注意事项 #

• fallback: false：确保只有getStaticPaths中定义的路径会被生成，纯静态站点建议使用此配置；如果设为true，未预定义的路径无法在静态导出后生成。
• 数据获取逻辑：需确保构建阶段能获取到所有动态参数组合，可从CMS、数据库或本地静态文件读取。

内容的提问来源于stack exchange，提问作者Андрей Свищёв