NextJS + Netlify表单提交出现HTTP 405错误求助

问题背景 #

我按照教程在Next.js项目首页搭建了联系表单，线上站点提交时显示“页面未找到”，本地开发环境先报405错误再跳转到成功页。参考相关内容修改代码并在public目录下添加静态HTML表单后，仍出现405方法不允许错误。

排查与解决步骤 #

1. 修正表单提交的请求格式 #

Netlify表单不支持JSON格式的POST请求，必须使用FormData格式提交，同时调整表单提交事件绑定方式：

修改handleSubmit函数：

const handleSubmit = async (event) => {
  event.preventDefault();
  const formData = new FormData(event.target);
  // 添加上动态生成的subject字段
  formData.append('subject', `Prospekti ${submitterName} otti yhteyttä Juhokoli.fi`);

  try {
    const response = await fetch('/', {
      method: 'POST',
      body: formData,
      headers: {
        'Accept': 'application/x-www-form-urlencoded'
      }
    });
    if (response.ok) {
      // 提交成功后跳转到带success参数的首页
      router.push('/?success=true', undefined, { shallow: true });
    } else {
      console.error('表单提交失败');
    }
  } catch (error) {
    console.error(error);
  }
}

同时调整表单的事件绑定，移除无效的action={handleSubmit}，改为onSubmit绑定：

<form
  name="contact-form"
  onSubmit={handleSubmit}
  method="POST"
  data-netlify="true"
  netlify-honeypot="bot-field"
>

2. 确保静态HTML表单与React表单字段完全匹配 #

Netlify在构建时需要扫描到完整的表单结构，因此public目录下的静态表单必须和React表单的字段、属性完全一致：

修改后的public/form.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yhteydenottolomake</title>
</head>
<body>
    <form
    name="contact-form"
    method="POST"
    data-netlify="true"
    netlify-honeypot="bot-field"
    >
    <input type="hidden" name="contact-form" value="contact-form" />
    <input type="hidden" name="subject" value="Prospekti otti yhteyttä Juhokoli.fi" />
    <input type="hidden" name="bot-field" />
        <label htmlFor="fullName">Nimi *</label>
        <input
            placeholder="Nimi *"
            type="text"
            name="fullName"
            id="fullName"
            autoComplete="name"
            required
        />
        <label htmlFor="tel">Puhelinnumero *</label>
        <input
            placeholder="Puhelinnumero *"
            type="tel"
            autoComplete="tel"
            name="tel"
            id="tel"
            required
        />
        <label htmlFor="email">Sähköposti</label>
        <input
            placeholder="Sähköposti"
            type="email"
            autoComplete="email"
            name="email"
            id="email"
        />
        <label htmlFor="message">Viesti</label>
        <textarea
            placeholder="Viesti"
            name="message"
            id="message"
        ></textarea>
        <button type="submit">Lähetä</button>
</form>
</body>
</html>

3. 检查Netlify后台表单配置 #

• 登录Netlify站点后台，进入Forms页面，确认contact-form已被系统识别
• 如果表单未被识别，重新触发站点部署，确保构建过程中Netlify扫描到public目录下的静态表单

4. 修复本地开发环境的405问题 #

本地开发时需要借助Netlify CLI模拟表单提交逻辑：

• 安装Netlify CLI：npm install -g netlify-cli
• 使用netlify dev命令启动本地服务，替代next dev，确保表单请求能被正确处理

5. 优化提交后的跳转逻辑 #

完全依赖router.push实现成功跳转，避免依赖表单action属性导致的404问题，确保提交成功后能正确显示确认页面。

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