编辑“︁Next.js表单基础”︁（章节）

== 使用API路由处理表单提交 ==

在Next.js中，你可以使用API路由来处理表单提交。首先创建一个API路由：

<syntaxhighlight lang="javascript">
// pages/api/submit-form.js
export default function handler(req, res) {
  if (req.method === 'POST') {
    // 处理POST请求
    const { email, password } = req.body;
    
    // 这里可以进行服务器端验证
    if (!email || !password) {
      return res.status(400).json({ error: '邮箱和密码是必填项' });
    }
    
    // 模拟数据库操作
    console.log('接收到的数据:', { email, password });
    
    return res.status(200).json({ success: true });
  } else {
    // 处理其他HTTP方法
    res.setHeader('Allow', ['POST']);
    return res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}
</syntaxhighlight>

然后在前端组件中调用这个API：

<syntaxhighlight lang="javascript">
async function handleSubmit(e) {
  e.preventDefault();
  const response = await fetch('/api/submit-form', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(formData),
  });
  
  const result = await response.json();
  if (response.ok) {
    alert('表单提交成功!');
  } else {
    alert(`错误: ${result.error}`);
  }
}
</syntaxhighlight>