Next.js API表单提交为何发送空字段？数据丢失问题排查

核心问题原因 #

你混淆了Next.js的Pages Router和App Router的API请求处理逻辑：

• 后端代码采用了App Router的写法（export async function POST），但错误导入了Pages Router专属的NextApiRequest类型。
• App Router的请求对象基于Web标准Request，不能直接通过req.body读取数据，必须调用req.json()方法解析JSON格式的请求体。

修复步骤 #

1. 移除NextApiRequest的导入，改用Web标准的Request类型
2. 在POST函数中通过await req.json()正确解析请求体
3. 保留原有类型定义保证类型校验

修复后的后端代码 #

import { NextResponse } from 'next/server';
import nodemailer from 'nodemailer';

const transporter = nodemailer.createTransport({
    service: "gmail",
    auth: {
        user: 'romanenkofloors@gmail.com',
        pass: '********',
    }
});

interface MailData {
  senderEmail: string;
  name: string;
  message: string;
  floortype: string;
  postcode: string;
  location: string;
}

export async function POST(req: Request) {
    try {
      // 正确解析App Router的JSON请求体
      const { senderEmail, name, message, floortype, postcode, location }: MailData = await req.json();
      console.log('解析后的请求数据:', { senderEmail, name, message, floortype, postcode, location });

      // 邮件内容配置
      const mailOptions = {
        from: 'romanenkofloors@gmail.com',
        to: 'vovasan2004@gmail.com',
        subject: 'Новый запрос от посетителя',
        text: `Имя: ${name}\nEmail: ${senderEmail}\nПочтовый индекс: ${postcode}\nГород: ${location}\nТип желаемого покрытия: ${floortype}\nВопрос: ${message}`,
      };

      await transporter.sendMail(mailOptions);
      return NextResponse.json({ success: true });
    } catch (error) {
      console.error(error);
      return NextResponse.json({ success: false, error: 'Ошибка при отправке письма' });
    }
}

额外验证建议 #

• 前端在handleSubmitForm中先打印待发送数据，确认formInputs和selectedFloor有有效值：console.log('待发送数据:', { formInputs, selectedFloor })
• 后端通过打印解析后的请求体，确认数据已正确接收

内容的提问来源于stack exchange，提问作者Володимир Романенко