World Hacker（ぎょうざブログ）

みなさんどうも、こんばんみ～。某ぎょうざです。

はい、今更ながら、問い合わせフォームなどでメール送信機能を実装する際に便利なツール

Resend（リセンド）を利用する際に、ぎょうざが躓いたところを備忘録として記録しておきます。

同じようなケースあるいは現象で困っている方の参考になれば幸いです。

【目次】

• 送信可能数：100通/日、最大3000通/月

React Emailと呼ばれるパッケージと組み合わせれば、送信する際のテンプレートも利用できます

React Email

A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.

https://react.email

• 有用性：問い合わせフォームをコンポーネントとして用意してメール送信機能を追加する
• 根拠：ResendのAPI経由で送信
• 具体例：以下Next.js (v15.3.2)、Resend (v^4.5.1)で実装したときのソースコード

try {
    const data = await resend.emails.send({
      from: process.env.CONTACT_FORM_SEND_FROM_EMAIL || '', // 送信元
      to: [email, process.env.CONTACT_FORM_SEND_TO_EMAIL || ''], // 送信先
      subject: `【${SITE_NAME}】より【お問い合わせ内容の確認】`,
      react: ContactFormEmailTemplate({ name, email, message }), // メールテンプレートコンポーネント
      replyTo: email, // ユーザーのメールアドレスに返信できるようにする
      text: `名前: ${name}\nメールアドレス: <span class="math-inline">\{email\}\\nメッセージ\:\\n</span>{message}`, // プレーンテキスト版のメール
    });

• 現象：
  Cloudflare PagesにデプロイしたNext.jsアプリで、Resend SDKを使ったメール送信機能が「Error: A Node.js API is used (MessageChannel) which is not supported in the Edge Runtime.」というエラーで動作しない。Cloudflare Pagesのビルドシステムは、全ての非静的ルート（APIルート含む）に export const runtime = 'edge'; を要求する。
• 原因：
  Resend SDK（またはその依存関係、特にメールテンプレートをReactコンポーネントでレンダリングする部分）が、Edge Runtimeでは利用できないNode.js固有のAPI（例: MessageChannel）に依存している。一方、Cloudflare PagesのビルドはAPIルートにもEdge Runtimeを強制する。
• 解決策：
  Node.jsのフル機能が必要なメール送信処理を、Next.jsアプリケーションとは独立したCloudflare Workerに切り出し、Next.jsアプリからはそのWorkerをREST APIとして呼び出す。

1. Cloudflare Workerプロジェクト作成: Wrangler CLIで新規Workerプロジェクトを作成。
2. wrangler.toml 設定: compatibility_flags = [ "nodejs_compat" ] を設定し、Node.js互換モードを有効化。
3. Workerスクリプト実装: HonoとResend SDKを使い、メール送信APIエンドポイントを作成。APIキーはWorkerのシークレットで管理。Next.jsアプリからのアクセスを許可するため、CORS設定を適切に行う。
4. Workerデプロイ: npx wrangler deploy でデプロイ。
5. Next.jsアプリからの呼び出し: 問い合わせフォームコンポーネント (例：ContactForm.tsx) の fetch 先を、デプロイしたWorkerのURLに変更。WorkerのURLは環境変数 (NEXT_PUBLIC_CONTACT_WORKER_URL) で管理。
6. Next.jsの該当ページ (/contact) のランタイム: export const runtime = 'edge'; を設定したままにできる（メール送信ロジックは外部Workerにあるため）。
   • 工夫点: これにより、Next.jsアプリ本体はEdgeの恩恵を受けつつ、Node.js依存の処理は専用のWorkerに任せることで、ランタイムの競合を回避できた。

• 現象：？？？
• 原因：？？？
• 解決策：？？？

Resendは、メール送信機能を組み込むのに便利なツールです。
自身のWebサービスに問い合わせフォームを実装したい方におすすめです。

ここまで読んでいただき、ありがとうございました。

以上、某ぎょうざでした。