Next.js基于点击项ID的动态路由404问题求助

• 检查动态路由文件结构：
  若使用Next.js App Router，动态路由的正确结构应为app/detail/[id]/page.jsx，而非直接在detail文件夹下创建[id].jsx；若用Pages Router，文件需放在pages/detail/[id].jsx，确保项目路由体系与文件位置匹配。

• 验证getStaticPaths的配置：

  • 确保paths数组生成的id值与跳转时传入的item.id完全一致（注意类型统一，比如数字需转为字符串，因为params的键值均为字符串类型，示例：{ params: { id: '1' } }）。
  • 检查fallback参数：若餐厅数据需动态更新或无法在构建时全部预生成，需设置fallback: true（开发/生产环境均可动态生成未预定义路径）或fallback: 'blocking'（生产环境阻塞请求生成页面后缓存）。若设为fallback: false，任何不在paths内的id都会直接返回404。

• 确认Link组件的跳转格式：
  避免字符串拼接时的格式错误，推荐使用Link的对象式写法：

  <Link href={{ pathname: '/detail/[id]', query: { id: item.id } }}>
    查看详情
  </Link>
  

  若用字符串拼接，需确保item.id转为字符串，比如/detail/${String(item.id)}，防止数字id导致路由不匹配。

• 检查getStaticProps的参数与逻辑：
  确认getStaticProps中params.id能正确获取跳转的id值，且能根据该id正常获取餐厅数据。若数据获取失败，可在getStaticProps中判断并返回{ notFound: true }，但需排查是否是该逻辑误触发了404。

• 验证开发/生产环境差异：
  开发模式下Next.js会重新运行getStaticPaths，但生产模式是构建时生成所有预渲染路径。若开发环境正常、生产环境404，大概率是构建时paths数组未包含所有需要的id，检查构建时的数据来源是否正确（比如是否从本地文件读取，而生产环境数据不同）。

内容的提问来源于stack exchange，提问作者Ferdinand Aprillian Manurung