Next.js 生成博客详情页时持续返回404页面问题排查

以下是几个最可能导致问题的原因及排查步骤：

1. 动态路由文件命名错误 #

Next.js的动态路由要求文件名为[slug].js（或.tsx），而非你提到的[path]s.js。文件名不匹配的话，Next.js无法识别动态路由规则，直接返回404。请确认文件是否放在pages/blog/[slug].js（或直接pages/[slug].js，取决于你的路由结构）路径下。

2. Contentful内容配置问题 #

• slug字段缺失或无效：登录Contentful后台，检查所有blog类型的条目，确保每个条目都填写了非空的slug字段，且字段值符合URL规范（不含特殊字符、空格等）。
• 内容类型ID不匹配：getStaticPaths和getStaticProps中content_type: "blog"的值必须和Contentful中内容类型的ID完全一致（注意是ID，不是后台显示的名称）。如果内容类型ID是blogPost或其他值，参数错误会导致无法获取条目，生成的paths数组为空，所有路由都会返回404。

3. API客户端配置错误 #

确认createClient中的space和accessToken是否正确：

• 不要混淆预览token和生产token，生产环境请使用Delivery API token，预览环境才用Preview API token。
• 可在本地测试API调用，比如直接执行client.getEntries({content_type: "blog"})，查看是否能正常返回Contentful中的博客条目。

4. 静态生成逻辑问题 #

• fallback设置：你当前设置fallback: false，意味着只有getStaticPaths生成的路径会被预渲染。如果某个slug对应的条目在Contentful中存在，但getStaticPaths没捕获到（比如slug有特殊字符、API调用失败），访问该路径会直接返回404。可临时将fallback改为true，测试是否能正常渲染页面，再排查路径生成问题。
• 路径生成错误：在getStaticPaths中添加console.log(paths)，查看生成的slug是否和Contentful中的一致，是否存在格式错误。

5. 缓存或构建问题 #

如果修改了Contentful的条目但未重新构建项目，Next.js会使用之前预渲染的静态页面缓存，导致新的slug路径不存在。请执行npm run build && npm run start重新构建并启动项目，测试是否解决问题。

附你提供的代码（注意文件名需修正）：

import {createClient} from "contentful"

const client = createClient({
    space: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    accessToken: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
});

export const getStaticPaths = async () => {
    const res = await client.getEntries({
        content_type: "blog" // 确认此处与Contentful内容类型ID一致
    })

    const paths = res.items.map(item => {
      return {
        params: {slug: item.fields.slug}
      }
    })

    return {
      paths,
      fallback: false
    }
}

export const getStaticProps = async ({params}) => {
  const {items} = await client.getEntries({
    content_type: "blog",
    "fields.slug": params.slug
  }) 

  return {
    props: {blog: items[0]}
  }

}

function blogDetails({blog}) {
  console.log(blog)
  return (  
    <div>
      Blog details
    </div>
  )
}

export default blogDetails

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