Next.js 14.1.0中POST请求触发405方法不允许错误求助

核心问题分析 #

你的服务端代码采用了Next.js Pages Router的API路由写法，但在Next.js 13+的App Router中，API路由规范已变更。当前route.ts使用NextApiRequest/NextApiResponse并导出handler函数，不符合App Router要求，导致Next.js无法识别POST请求处理逻辑，从而返回405错误。

解决方案步骤 #

1. 修正API路由代码（适配App Router） #

将app/api/sendmail/route.ts修改为App Router标准写法：

import nodemailer from "nodemailer";

export async function POST(req: Request) {
  try {
    const { name, mobileNumber, email, option, requirements } = await req.json();

    const transporter = nodemailer.createTransport({
      host: "smtp.gmail.com",
      port: 587,
      secure: false,
      auth: {
        user: "dummy@gmail.com",
        pass: "*****",
      },
    });

    await transporter.sendMail({
      from: "dummy@gmail.com",
      to: "dummy@gmail.com",
      subject: "New Contact Form Submission",
      text: `
        Name: ${name}
        Mobile Number: ${mobileNumber}
        Email: ${email}
        Option: ${option}
        Requirements: ${requirements}
      `,
    });

    return new Response(JSON.stringify({ success: true }), { status: 200 });
  } catch (error) {
    console.error("Error occurred while sending email:", error);
    return new Response(JSON.stringify({ success: false, error: "Failed to send email" }), { status: 500 });
  }
}

2. 其他排查点 #

• 确认路由目录结构：确保API路由文件位于app/api/sendmail/route.ts，App Router下的API路由必须遵循app/api/[route-name]/route.ts的目录规则。
• 清除缓存：重启Next.js开发服务器，同时清除浏览器缓存，避免旧路由配置被缓存。
• 检查请求一致性：前端已正确设置Content-Type: application/json，与服务端解析逻辑匹配，此步可忽略。

代码说明 #

• App Router中，API路由通过导出POST/GET等对应HTTP方法的函数处理请求，无需统一handler函数。
• 请求体解析使用await req.json()替代Pages Router的req.body。
• 返回响应使用new Response()替代res.status().json()的写法。

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