Next.js披萨店应用Axios GET请求404错误排查求助

1. 核对请求URL与API路由路径 #

• 检查客户端index.js中Axios请求的URL是否完全匹配API路由：比如调用/api/products/[id]时，确认id参数无拼写、大小写或格式错误，路径没有多余/缺失的斜杠。
• 本地刷新后恢复正常，大概率是服务端渲染/静态生成时机差异：如果在getStaticProps/getServerSideProps中发起请求，要确保客户端hydration阶段的请求路径和服务端完全一致，避免客户端用相对路径时出现基准URL偏差。

2. 验证API路由文件合法性 #

• 确认pages/api目录结构符合Next.js规则：
  • /api/products/index.js对应/api/products接口
  • /api/products/[id].js对应/api/products/:id接口
• 检查路由文件名大小写：Vercel部署环境区分大小写，若文件名写成[ID].js而非[id].js，会导致路由匹配失败返回404。
• 在[id].js中，确认req.query.id已正确获取，且后续业务逻辑（如数据库查询）未因id无效返回404。

3. 本地与Vercel环境差异排查 #

• Vercel上API路由以Serverless函数运行，需确认：
  • 数据库连接、环境变量等配置已正确部署，未因缺少配置导致查询失败返回404。
  • 函数依赖无兼容性问题，比如某些本地可用的模块在Serverless环境中无法正常运行。
• 查看Vercel函数日志：通过Vercel控制台查看API请求的执行日志，确认是路由匹配失败还是函数内部报错导致的404。

4. Axios请求配置与时机检查 #

• 客户端组件中，确保请求在useEffect钩子中发起，避免在组件渲染阶段同步请求导致hydration时路径异常。
• 检查Axios的baseURL配置：本地开发时可用http://localhost:3000，部署到Vercel后建议使用相对路径（如/api/products/123），避免因域名配置错误引发路径不匹配。

5. 静态生成配置校验 #

• 若使用getStaticPaths生成静态页面，确认已开启fallback: true，或预渲染路径包含所有可能的产品id值。未预渲染的路径在Vercel上会直接返回404，而本地开发时可能触发动态生成逻辑。

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