NEXT.js + Netlify Formsで登録できなかった時の対処方法

NEXT.js + Netlify Formsでお問い合わせフォームを作成しNetlifyでフォートして認識はされるものの一向に
受信しなかったのでやったことをまとめます。

解決方法

/publicディレクトリ内に__forms.htmlを作成します。
POSTするURLを/__forms.htmlに設定する。

静的htmlファイルの配置

publicディレクトリに__forms.htmlという名称で静的htmlを配置する

<html>
　<head></head>
　<body>
　　<form name="contact" data-netlify="true" hidden>
　　　<input type="hidden" name="form-name" value="contact" />
　　　<input name="name" type="text" />
     <input name="email" type="email" />
　　　<textarea name="message"></textarea>
　　</form>
　</body>
</html>

<input type="hidden" name="form-name" value="contact" />は必ず必要です。

そのほかのinput要素はフォームの中身合わせて変更してください。

コンポーネントにフォームを書く

"use client";

export function ContactForm() {
　const handleFormSubmit = async (event) => {
　　event.preventDefault();
　　const formData = new FormData(event.target);
　　await fetch("/__forms.html", {
　　　method: "POST",
　　　headers: { "Content-Type": "application/x-www-form-urlencoded" },
　　　body: new URLSearchParams(formData).toString(), });
　　};

　　return (
　　　<form name="contact" onSubmit={handleFormSubmit}>
　　　　<input type="hidden" name="form-name" value="contact" />
　　　　<input name="name" type="text" placeholder="お名前" required />
　　　　<input name="email" type="email" placeholder="example@example.com" />
　　　　<textarea name="message" placeholder="内容を入れる" />
　　　　<button type="submit">Submit</button>
　　　</form>
　　);
}

POSTするURLを/__forms.htmlとし、<input type="hidden" name="form-name" value="contact" />についてはどちらにも入れておく。

動作確認

Netlifyにデプロイが終わったらname属性に指定した名前でformが認識されると思います。
実際にフォームからデータを送信しNetlifyに登録されるかを確認し登録されれば作業は完了です。

まとめ

/publicディレクトリに__forms.htmlを配置する
フォームのコンポートネントを修正する

注意事項

<input type="hidden" name="form-name" value="contact" />はNetlify formに必ず必要、どちらのファイルにも入れる。
各タグのnameとtype属性は合わせておく

セイルデザインログブック