如何在 Next.js 中正确将表单数据传递到 API 路由

小伟大大_2231

发布时间：2026-01-31 19:49:18

299人浏览过

来源于php中文网

原创

如何在 Next.js 中正确将表单数据传递到 API 路由

在 next.js 中，客户端组件无法通过 `export/import` 直接向服务端 api 路由共享状态；必须通过 http 请求（如 `fetch` post）发送数据，服务端再从 `req.body` 解析——这是前后端分离架构的基本约束。

为什么 export let formData 在 API 中无效？

根本原因在于执行环境隔离：

FormComponent 运行在浏览器（客户端），其 formData 是内存中的 JavaScript 变量；
/api/endpoint 是服务端 Node.js 函数（API Route），启动时独立于任何前端组件，也无法访问客户端内存。
因此，import { formData } from './FormComponent' 在服务端会得到 undefined ——它导入的是模块顶层声明的初始空对象，而非用户提交后的动态值。

✅ 正确做法：用 fetch 发起 POST 请求

修改表单组件，移除全局可变 export let formData，改用受控组件 + fetch 显式提交：

react design

将 Learn Social Studies 品牌系统应用于 React 界面，采用 CSS 变量、可复用组件规范，默认浅色主题并支持深色主题。

下载

// components/FormComponent.tsx
import { useState } from 'react';

const FormComponent = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value,
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      const res = await fetch('/api/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const result = await res.json();
      console.log('Submission successful:', result);
      alert('Message sent!');
    } catch (err) {
      console.error('Submission failed:', err);
      alert('Failed to send. Please try again.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
          required
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          required
        />
      </label>
      <br />
      <label>
        Message:
        <textarea
          name="message"
          value={formData.message}
          onChange={handleChange}
          rows={4}
          required
        />
      </label>
      <br />
      <button type="submit">Send Message</button>
    </form>
  );
};

export default FormComponent;

? 对应的 API 路由（服务端接收）

创建文件 pages/api/submit.ts（或 app/api/submit/route.ts，取决于你使用 Pages Router 还是 App Router）：

// pages/api/submit.ts
export default async function handler(req, res) {
  // ✅ 必须处理 POST 方法
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    // 解析请求体（Next.js 默认不自动解析 JSON）
    let body;
    try {
      body = JSON.parse(req.body);
    } catch (e) {
      return res.status(400).json({ error: 'Invalid JSON' });
    }

    // ✅ 现在可以安全访问表单字段
    console.log('Received data:', body);
    console.log('Email:', body.email); // 例如：body.email

    // ? 此处可调用数据库、邮件服务等
    // await sendEmail(body.email, body.message);

    res.status(200).json({ 
      success: true, 
      received: { email: body.email, name: body.name } 
    });
  } catch (error) {
    console.error('API error:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
}

? 重要提示（App Router 用户）：若使用 app/api/submit/route.ts，需改为：export async function POST(request: Request) { const body = await request.json(); // ✅ 自动解析 JSON console.log(body); return Response.json({ success: true }); }