Cloudflare TurnstileとResendを使用した、商用レベルのコンタクトフォームの構築

まず、CloudflareからTurnstileのサイトキーを取得します。

それを .env.local に追加します：

NEXT_PUBLIC_TURNSTILE_SITE_KEY=your-site-key
TURNSTILE_SECRET_KEY=your-secret-key

次に、ウィジェットをフォームに配置します：

"use client";

export default function ContactForm() {
  return (
    <form method="POST" action="/api/contact">
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="details" required />

      {/* Turnstile チャレンジ */}
      <div
        className="cf-turnstile"
        data-sitekey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
      />

      <button type="submit">送信</button>

      <Script
        src="https://challenges.cloudflare.com/turnstile/v0/api.js"
        async
        defer
      />
    </form>
  );
}

APIルート (/api/contact/route.ts) で、メールを送信する前にトークンを確認します。クライアント側のトークンは偽装可能なため、必ずサーバーサイドで検証してください。

export async function POST(request: Request) {
  const formData = await request.formData();
  const turnstileToken = formData.get("cf-turnstile-response");

  if (!turnstileToken) {
    return NextResponse.json(
      { ok: false, message: "スパム検証に失敗しました。" },
      { status: 400 },
    );
  }

  // Cloudflare で検証
  const verifyResponse = await fetch(
    "https://challenges.cloudflare.com/turnstile/v0/siteverify",
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        secret: process.env.TURNSTILE_SECRET_KEY,
        response: turnstileToken,
      }),
    },
  );

  const verifyData = await verifyResponse.json();

  if (!verifyData.) {
     .(
      { : , :  },
      { :  },
    );
  }
}

ResendからAPIキーを取得し、彼らのクリーンなAPIを使ってメールを送信します：

const emailPayload = {
  from: process.env.RESEND_FROM,
  to: [process.env.RESEND_TO],
  subject: `${formData.get("name")}様からの新しいお問い合わせ`,
  reply_to: formData.get("email"),
  text: `お名前: ${formData.get("name")}\nメール: ${formData.get("email")}\n\n${formData.get("details")}`,
};

const emailResponse = await fetch("https://api.resend.com/emails", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.RESEND_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify(emailPayload),
});

メールを送ること自体は簡単ですが、確実に「受信トレイ」に届けるのは至難の業です。以下の3つのDNSレコードが必要になります：

これらが設定されていないと、GmailやOutlookはあなたのメールをスパムとしてマークしたり、完全に拒否したりします。当サイトのコンタクトフォームも、DMARCを追加するまで数週間まともに機能していませんでした。

プログレッシブ・エンハンスメント

JavaScriptが読み込まれなかった場合でも、フォームが動作するようにします。APIルートでコンテンツタイプを検出することで、ネイティブなフォーム送信に対応できます：

const contentType = request.headers.get("content-type") ?? "";
const isFormSubmit = contentType.includes("application/x-www-form-urlencoded");

if (isFormSubmit) {
  return NextResponse.redirect(
    new URL("/contact?success=1&lang=ja", request.url),
    303,
  );
}

具体的なエラーハンドリング

汎用的なエラーメッセージを返すのではなく、何が間違っているのか（必須項目の漏れ、無効なメール形式、認証失敗など）を具体的に伝えることで、ユーザーが修正しやすくします。