Next.js で作っている自分のサイトのフォームメールに Resend.com を使った
現在制作中の Next.js を使った自分のサイトのお問い合わせフォームに Resend.com というサービスを使うことにした。
最初は SendGrid を考えていたけど、法人へのみの提供のようなので、代わりに Resend.com にした。
導入は簡単で結果としては良かった。
現在の仕様
- Next.js から静的ページとしてエクスポート
- Cloudflare Workers に GitHub Acitions でデプロイ
入力ページは contact/page.tsx で作成し、Resend.com へフェッチする api を src/index.ts 内に作成した。（src/index.ts は wrangler.json で main に設定しているので最初に実行される。）
src/index.ts には /api/contact へ POST でフェッチされた場合に、入力内容の処理をして resend の SDK で送信するようにした。
Cloudflare Workers での Node.js SDKの使い方
お問い合わせフォームの流れ
- contact 入力ページの form が onSubmit されたら /api/contact にフェッチして内容を送る
- /api/contact へフェッチされたのを index.ts 内のルーティングで判定し処理する
- バリデーションをしてから Resend.com へ SDK を使って送信
- Resend.com からのレスポンスを contact 入力ページへ返す
- contact 入力ページでレスポンスに応じた表示をする