Netlify Formsから受信できなかった時にやったこと｜Next.js

Next.js（App Router）で作った個人開発アプリに、ユーザーからのフィードバックを集めるための簡易フォームを実装しました。

Netlify Formsを初めて使ってみたのですが、その際に以下の3つの問題でつまづきました

• ボタンの値がフォーム送信されない
  （ネットワークタブで確認したところ answer フィールドが空）
• Netlify FormにFeedbackフォームが認識されない
  （Netlify Dashboard の Forms タブに表示されない）
• フォームが認識された後も、受信ができない
  （Status 200 OK だが text/html が返ってくる）

この記事では、それぞれの問題の解決方法をまとめます。

環境

• Next.js: 16.1.1（App Router）
• React: 19.2.3
• ホスティング: Netlify
• フォーム: Netlify Forms（無料プラン）

解決方法

問題1：ボタンの値が送信されない
→ useState + hidden input でボタンの値を管理

問題2：Netlifyがフォームを認識しない
→ 静的HTMLファイル（public/form.html）を追加してビルド時に認識させる

問題3：Netlifyで受信できない
→ POST先を / から /form.html (作成した静的HTMLファイル)に変更

問題1：ボタンの値が送信されない

今回のフィードバックフォームでは、「👍 Yes」「👎 No」の2つのボタンがあり、どちらのボタンが押されたかを判定する必要がありました。

通常のHTMLフォームなら、 button に name と value 属性をつければ、押されたボタンの値が自動で送信されます。

しかし、e.preventDefault() して JavaScript の fetch で送信する場合、FormData にボタンの name/value が自動で含まれません。

そのため、useState + hidden input で管理する必要がありました。

const [answer, setAnswer] = useState('');

return (
    <form>
        {/* hidden input で answer の値を送信 */}
        <input type="hidden" name="answer" value={answer} />
        
        <span className="pill-question">気に入りましたか？</span>
        <div className="pill-buttons">
            <button 
                type="submit" 
                className="pill-btn yes"
                onClick={() => setAnswer('Yes')}  // ← onClick で値をセット
            >
                👍
            </button>
            <button 
                type="submit" 
                className="pill-btn no"
                onClick={() => setAnswer('No')}  // ← onClick で値をセット
            >
                👎
            </button>
        </div>
    </form>
);

結果：DevTools → Network タブにて、answerフィールドの値が反映されていることを確認 🎉

問題2：Netlifyがフォームを認識しない

Next.jsのビルド時にNetlifyがフォームを検出できるよう、public/ ディレクトリに静的HTMLを配置します。

ポイント：

• public/form.html と実際のReactコンポーネントで、すべてのフィールドの name 属性を一致させること
• form の name 属性を一致させること
• hidden 属性をつけること

<!-- public/form.html -->
<form name="feedback" netlify netlify-honeypot="bot-field" hidden>
    <input type="hidden" name="form-name" value="feedback" />
    <input type="text" name="answer" />
</form>

結果：Netlify Dashboard → Forms のActive Forms に「feedback」フォームが表示されるように 🎉

問題3：Netlifyで受信できない

// ❌ Before
const response = await fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: params.toString(),
});

// ✅ After
const response = await fetch('/form.html', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: params.toString(),
});

結果：受信が確認できるように 🎉

開くとこんな感じ👇

ネットワークタブでの確認方法

正しく送信されているか確認するには、ブラウザのデベロッパーツールを使います。

確認手順

1. DevTools → Network タブを開く
2. フォームを送信
3. /form.htmlへのPOSTリクエストを確認

確認するポイント

① レスポンス

Status: 200 OK になっているか

② 送信データ（Payload）

form-name: feedback
bot-field: (空)
answer: Yes

まとめ

Next.js （App Router）でNetlify Formsを使う際のポイント：

1. 静的HTMLフォームを public/form.html に配置 してNetlifyにフォームを認識させる
2. POST先を /form.html に変更 して Netlify Forms に処理させる
3. 複数のボタンで値を送信したい場合
   • HTMLフォーム標準送信なら button の name/value が自動で送信される
   • JavaScript の fetch 送信なら useState + hidden input で管理が必要
4. ネットワークタブで確認 して正しいPayloadが送信されているかチェック