📮 Next.js × Resend で問い合わせフォーム 実装の流れ

• フォーム送信 → メール通知までの全体像
• Next.js App Router + Server Actions + Resend 使用

✅ ステップ①：画面（UI）をつくる【フロントエンド（page.tsx）】

• 名前、メール、内容の入力欄を作る
• デザインは Tailwind CSS を使ってきれいにする
• ユーザーが見る部分を作る

✅ ステップ②：入力チェック【フロントエンド(React Hook Form x zod)】

• 入力が空だったり、間違ったメール形式ならエラー表示
• Zod を使って入力ルールを設定する
• React Hook Form にZodを噛ませてバリデーション

✅ ステップ③：サーバーに送る【フロント → バック】

• 入力された情報を FormData にして actions.ts の関数に送る。
  • コード上は、actions.tsの関数を呼び出して実行するだけ。
• このactions.tsがバックエンドの役割をしてくれる。
  • actions.tsは”use server”でサーバー上で実行される
• use server の仕組みを使って安全に送信

✅ ステップ④：サーバーで処理【バックエンド】

• actions.ts に書かれた sendEmail() 関数がデータを受け取る
• スパム対策などもここで行える
• データをメール送信にまわす

✅ ステップ⑤：メール送信【バックエンド】

• Resend API を使ってメール通知を行う
• 管理者メールアドレスへ送信する
• .env に API キーを設定してセキュアにする

✅ ステップ⑥：結果を画面に表示【フロントエンド】

• 送信成功なら「送信完了！」と表示
• 送信中は「送信中…」＋アイコンを表示
• 失敗なら「送信できませんでした」とエラー表示

useStateを使うと、送信前、送信中、送信完了、成功、失敗の状態管理ができる。

  const [isSending, setIsSending] = React.useState(false); //送信状態
  const [isSuccess, setIsSuccess] = React.useState(false); //成功？
  const [isError, setIsError] = React.useState(false); //失敗？
  
  const onSubmit = async (data: FormData) => {
    setIsSending(true);
    setIsSuccess(false);
    setIsError(false);

    const formData = new FormData();
    formData.append("name", data.name);
    formData.append("email", data.email);
    formData.append("contents", data.contents);

    const result = await sendEmail(formData); //バックエンドの処理
    setIsSending(false); //ここまでで送信処理は終了
    
    //バックエンドでの処理状況に応じて状態を変化
    if (result.success) {
      setIsSuccess(true);
      setTimeout(() => {
        setIsSuccess(false);
      }, 3000);
    } else {
      setIsError(true);
      console.error(result.errors);
      setTimeout(() => {
        setIsError(false);
      }, 3000);
    }
  };

🎓 役割まとめ

💡 Resend を使えば、サーバー側でデータベースなしでも簡単にメール通知ができる！