Next.js使用getStaticPaths访问动态路由返回404及路由名称修改问题

一、404错误的核心原因及修复方法 #

• 路由路径不匹配
  你的页面文件存放在pages/posts/[id].js，对应的路由规则是/posts/[id]，你访问的http://localhost:3000/1不符合路由规则，正确的初始访问地址应为http://localhost:3000/posts/1。
• getStaticPaths参数类型错误
  Next.js要求getStaticPaths返回的params参数值必须为字符串类型，但Strapi返回的category.id是数字类型，路由匹配时数字1和字符串"1"会被判定为不匹配，导致404。
• getStaticProps接口请求地址错误
  你的请求地址拼接逻辑少了斜杠，当前拼接结果为http://localhost:1337/Categories1，无法正确请求到单条分类数据。
• 组件缺少return语句
  你的Category函数组件没有写return关键字，无法正常渲染内容，也可能触发异常。

修复后的完整代码如下：

// pages/posts/[id].js
function Category({ categories }) {
  return <>
    <h1>{categories.name}</h1>
  </>
}

export async function getStaticPaths() {
  const res = await fetch('http://localhost:1337/Categories')
  const categories = await res.json()

  const paths = categories.map((category) => ({
    params: { id: category.id.toString() },
  }))

  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`http://localhost:1337/Categories/${params.id}`)
  const categories = await res.json()

  return { props: { categories } }
}

export default Category

二、修改路由为分类名称的实现方法 #

可以使用分类名称作为路由参数，修改步骤如下：

1. 将页面文件重命名为pages/posts/[categoryName].js
2. 调整路由参数生成和查询逻辑，可对名称做格式化处理避免特殊字符导致路由异常，示例代码如下：

// pages/posts/[categoryName].js 核心逻辑
export async function getStaticPaths() {
  const res = await fetch('http://localhost:1337/Categories')
  const categories = await res.json()

  const paths = categories.map((category) => ({
    // 可将空格替换为连字符、统一转为小写优化路由格式
    params: { categoryName: category.name.replace(/\s+/g, '-').toLowerCase() },
  }))

  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  // 还原分类名称，根据你使用的Strapi版本调整查询参数即可
  const categoryName = params.categoryName.replace(/-/g, ' ')
  const res = await fetch(`http://localhost:1337/Categories?name=${encodeURIComponent(categoryName)}`)
  const categoryList = await res.json()
  return { props: { categories: categoryList[0] } }
}

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