Next.js访问页面提示API resolved without sending a response错误如何解决

问题原因 #

Next.js有严格的路由分类规则：

• pages/api目录下的所有文件都会被识别为API路由，仅用于处理后端接口请求，需要主动返回JSON、重定向等响应内容，不能直接存放前端React页面组件，也不会被自动渲染为前端页面。
  你当前将success页面组件放在了pages/api/grademate/pay/目录下，访问时Next.js将其当做接口请求处理，但你的代码只导出了React组件，没有返回任何接口响应，所以会抛出API resolved without sending a response的报错，导致请求卡住。

解决步骤 #

1. 调整页面文件位置
   把pages/api/grademate/pay/success文件夹整体移出api目录，放到pages目录下的对应位置，比如最终路径为pages/grademate/pay/success/index.js，此时直接访问/grademate/pay/success路径即可正常加载成功页面。
2. 修改支付接口逻辑实现跳转
   修改/api/grademate/pay接口的代码，支付逻辑处理完成后直接重定向到成功页即可，示例代码如下：

// pages/api/grademate/pay/index.js
export default function handler(req, res) {
  // 原有支付校验、处理逻辑保留在这里
  // 处理完成后执行重定向
  res.redirect('/grademate/pay/success')
}

如果使用的是Next.js 13+的App Router模式，逻辑基本一致：页面组件放在app目录下，API接口放在app/api目录下，二者不要混用即可。

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