Next.js 12.3.4 API路由调用返回404，求正确配置方法

核心原因 #

你使用的是Next.js 12.3.4，该版本仅支持Pages Router，不兼容Next.js 13+ App Router的route.js写法，这是导致404的关键。

正确的API路由配置步骤 #

1. 目录结构要求
   必须将API路由文件放在pages/api目录下，路由路径由文件名决定：比如创建pages/api/sendEmail.js，对应访问路径/api/sendEmail。

2. API路由代码修正
   Pages Router的API路由需要导出默认的handler函数，而非单独的POST方法，同时使用req和res对象处理请求与响应：

   export default async function handler(req, res) {
     // 只处理POST请求
     if (req.method !== 'POST') {
       res.setHeader('Allow', ['POST']);
       return res.status(405).end(`Method ${req.method} Not Allowed`);
     }
   
     try {
       // Next.js 12会自动解析JSON格式的请求体，直接使用req.body即可
       console.log('接收的数据:', req.body);
       // 必须返回响应，否则客户端会一直等待
       res.status(200).json({ message: '邮件请求已接收' });
     } catch (error) {
       console.error('处理请求出错:', error);
       res.status(500).json({ error: '服务器内部错误' });
     }
   }
   

3. 前端请求注意点
   你的fetch请求路径/api/sendEmail是正确的，但注意JSON.stringify(e.target)可能不是你需要的有效数据（e.target是表单DOM元素），建议改为收集表单字段值后再序列化，比如：

   // 假设是表单提交事件
   const formData = new FormData(e.target);
   const payload = Object.fromEntries(formData);
   const response = await fetch("/api/sendEmail", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify(payload),
   });
   

4. 必要操作
   修改完成后，重启Next.js开发服务器，确保新的API路由被注册。

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