如何将API返回数据映射为Next.js getStaticPaths的双动态路由参数

实现双动态路由参数映射步骤 #

1. 确认路由结构正确性

要实现www.com/[username]/[slug]的访问格式，Next.js的目录结构必须和动态段命名完全匹配：

• Pages Router：pages/[username]/[slug].js
• App Router（Next.js 13+）：app/[username]/[slug]/page.js

如果需要将文章动态段命名为articleSlug，直接将对应的[slug]目录/文件重命名为[articleSlug]即可。

2. 编写路径生成逻辑

Pages Router 版本（getStaticPaths）

在对应页面文件中添加如下代码：

export async function getStaticPaths() {
  // 请求你的接口获取所有用户及关联文章数据
  const apiRes = await fetch("你的业务API地址");
  const userList = await apiRes.json();

  // 扁平化遍历生成所有路径组合
  const paths = userList.flatMap((user) => {
    return user.articles.map((article) => ({
      params: {
        // *键名必须和路由动态段命名完全一致*
        username: user.username,
        slug: article.slug
      }
    }));
  });

  return {
    paths,
    // 按需调整fallback值，未预生成的路径返回404/动态生成
    fallback: false
  };
}

App Router 版本（generateStaticParams）

export async function generateStaticParams() {
  const apiRes = await fetch("你的业务API地址");
  const userList = await apiRes.json();

  return userList.flatMap((user) => 
    user.articles.map((article) => ({
      username: user.username,
      slug: article.slug
    }))
  );
}

3. 编写页面数据获取逻辑

以Pages Router的getStaticProps为例：

export async function getStaticProps({ params }) {
  // 直接从params中拿到对应的两个动态参数
  const { username, slug } = params;
  // 用这两个参数查询对应文章的详情数据
  const articleRes = await fetch(`你的业务API地址?username=${username}&slug=${slug}`);
  const articleData = await articleRes.json();

  return {
    props: {
      articleData
    }
  };
}

常见踩坑说明 #

• 你提供的API返回示例存在语法错误，实际业务中需要保证每个用户对象下挂载自身的articles字段，修正后的结构参考：

[
  {
    "id": 1,
    "username": "demoUser",
    "email": "demo@example.com",
    "articles": [
      {"id": 101, "title": "测试文章", "description": "xxx", "slug": "test-post"}
    ]
  }
]

• params中的键名必须和路由动态段的命名完全一致，大小写、拼写都不能有差异，否则会出现参数匹配失败的问题。
• 如果需要开启未预生成路径的动态渲染，按需调整fallback参数为true或'blocking'即可。

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