はじめに
今回は、当サイトのお問い合わせフォームの全体構成と実装ポイントをまとめます。 Next.jsのApp Router＋Server Actions、Cloudflare Turnstile、Resendを組み合わせたセキュアな設計です。
実装例やソースコードは下記GitHubでも公開しています。
poko8nada/portfolio-site-v2
github.com
全体の流れ
- ユーザーがフォームを入力。
- 入力内容はセッションストレージに保存し、リロード時も保持。
react-hook-formとzodでリアルタイムバリデーション。
- Cloudflare Turnstileでスパム対策認証を実施。
- 認証トークン含むフォームデータをServer Actionへ送信。
- サーバー側でトークン検証後、Resendで「自動返信」と「管理者通知」メールを送信。
使用した技術
Cloudflare Turnstile
developers.cloudflare.com
Resend (メール送信API)
resend.com
zod (TypeScriptスキーマバリデーション)
zod.dev
工夫した点
フォームのUIと状態管理は一元化し、入力内容はセッションストレージに保存してリロードやページ遷移でも保持されます。
バリデーションはreact-hook-formとzodでリアルタイムに行い、エラーは即座に表示されます。
スパム対策としてCloudflare Turnstileを導入し、ボタンを押したタイミングでのみスクリプトをロードすることで、不要なリソース消費を防いでいます。認証後は一意のトークンをCloudflare APIでサーバー側検証し、フロントエンドでの偽装を防止しています。
検証が成功した場合のみresendで自動返信と管理者通知メールを送信します。失敗時はエラーを返し、送信中・完了・エラーなどの状態を明確に表示します。
まとめ
フロントエンドのUX向上と、サーバーサイドでのTurnstile＋Resend連携により、セキュアかつ信頼性の高いお問い合わせフォームを実現しています。 Next.jsの最新機能を活かしつつ、スパム対策・自動返信・管理者通知まで一気通貫で設計しました。
ではまた。