Resend API の使い方：初心者向けガイド

Eメールは、ユーザーのオンボーディングや通知からパスワードのリセット、マーケティングキャンペーンに至るまで、あらゆる用途に使用される現代のウェブアプリケーションの重要なコンポーネントです。しかし、信頼性の高いEメール送信インフラストラクチャを構築・管理するのは複雑で時間のかかる作業となり得ます。ここで、ResendのようなEメールAPIサービスが役立ちます。

Resendは、トランザクションEメールとマーケティングEメールの送信プロセスを簡素化するために設計された、開発者向けのプラットフォームを提供しています。堅牢なAPI、詳細な分析機能、優れた配信到達率を備えており、開発者はEメールインフラストラクチャの心配をすることなく、アプリケーションの構築に集中できます。

この包括的なガイドでは、Resend APIを使い始めるために知っておくべきすべてのことについて、そのコアコンセプトと料金体系の理解から、さまざまな人気フレームワークやプラットフォームとの統合まで、順を追って説明します。

💡

美しいAPIドキュメントを生成する優れたAPIテストツールをお探しですか？

開発チームが最大限の生産性で共同作業できる、統合されたオールインワンプラットフォームをお探しですか？

Apidogはあなたのすべての要求に応え、Postmanをはるかに手頃な価格で置き換えます！

button

Resendとは？

Resendは、開発者向けに構築されたEメールAPIプラットフォームです。古いEメールサービスプロバイダー（ESPs）と比較して、優れた開発者体験を提供することを目指しています。主な機能は以下の通りです。

モダンAPI：クリーンでRESTfulなAPIは、あらゆるアプリケーションに簡単に統合できます。
高い配信到達率：カスタムドメイン認証（DKIM、SPF、DMARC）、専用IP（アドオンとして）、自動抑制リスト管理などの機能により、Eメールがスパムフォルダではなく受信トレイに届くように注力しています。
フレームワーク統合：Node.js、Next.js、Python、Ruby、PHP、Goなどの人気フレームワーク向けに公式SDKとガイドを提供しています。
React Email統合：React Emailとシームレスに統合し、Reactコンポーネントを使用して美しくレスポンシブなEメールテンプレートを構築できます。
Webhook：配信、バウンス、開封、クリック、スパム報告などのEメールイベントに関するリアルタイム通知を提供します。
詳細な分析：ユーザーフレンドリーなダッシュボードを通じて、Eメールパフォーマンスに関する洞察を提供します。
開発者フォーカス：明確なドキュメント、役立つSDK、開発とデバッグを容易にするテストEメールなどのツールを提供し、開発者を念頭に置いて設計されています。

Resendは、SendGrid、Mailgun、AWS SESなどの既存のプレイヤーに代わる、よりモダンで開発者中心の選択肢として位置づけられており、使いやすさ、信頼性、現代のウェブ開発ワークフローとの優れた統合に焦点を当てています。

Resendの料金体系は？

Resendは、月間の送信メール数に基づいた段階的な料金体系を提供しており、トランザクションメールとマーケティングメールは別途考慮されます（ただし、料金ページでは主にトランザクションプランの詳細が記載されています）。

以下は、トランザクションメールプランの内訳です（執筆時点）。

無料プラン：

費用：$0 / 月
メール数：月間最大3,000通
日次制限：1日あたり100通
ドメイン：カスタムドメイン1つ
データ保持期間：1日
サポート：チケットサポート
主な機能：RESTful API、SMTPリレー、SDK、開封/リンク追跡、React Email統合、自動抑制リスト、DKIM/SPF/DMARC認証、Webhookエンドポイント1つ。
制限：シングルサインオン（SSO）なし、専用IPなし、ドメイン数と日次送信制限あり。

プロプラン：

費用：$20 / 月
メール数：月間最大50,000通（これを超えると超過料金が発生）
日次制限：日次制限なし
ドメイン：カスタムドメイン10個
データ保持期間：3日
サポート：チケットサポート
主な機能：無料プランのすべての機能に加え、SSO、Webhookエンドポイント10個。
制限：専用IPは含まれていません（後でアドオンとして利用可能）、Slackサポートなし。

スケールプラン：

費用：$90 / 月
メール数：月間最大100,000通（超過料金が発生）
日次制限：日次制限なし
ドメイン：カスタムドメイン1,000個
データ保持期間：7日
サポート：Slack＆チケットサポート
主な機能：プロプランのすべての機能に加え、専用IPをアドオンとして利用可能（$30/月、1日あたり500通以上の送信が必要）。
制限：専用IPはアドオンです。

エンタープライズプラン：

費用：カスタム料金
メール数：カスタムボリューム
日次制限：日次制限なし
ドメイン：柔軟
データ保持期間：柔軟
サポート：優先サポート、緊急応答SLA、配信到達率専門知識
主な機能：スケールプランのすべての機能に加え、専用IPウォーミング、配信到達率インサイト、柔軟なWebhook、SSOが含まれます。

重要な考慮事項：

超過：プランで許可されている数を超えるメールを送信すると、メールごとに追加料金が発生します。
専用IP：スケールプランおよびエンタープライズプラン向けに、追加の月額料金でアドオンとして利用可能です。共有IPの評判が気になる高ボリューム送信者におすすめです。
データ保持期間：Resendが送信メールのログと詳細を保存する期間は、プランによって異なります。
マーケティングメール：料金ページにはマーケティングメール用のトグルがあり、異なるプランまたは料金体系が適用される可能性を示唆していますが、スクレイピングされたコンテンツではトランザクションメールに焦点が当てられていました。最新のマーケティングメール料金については、Resendのウェブサイトをご確認ください。

無料プランは、小規模なプロジェクトやテスト目的には十分な容量です。プロプランとスケールプランは、メールボリュームと機能要件が増加する成長中のアプリケーションに対応します。エンタープライズプランは、大規模な運用向けにカスタマイズされたソリューションを提供します。

Resendを使い始める

メールを送信するには、まずResendアカウントを設定し、送信ドメインを構成する必要があります。

1. サインアップしてAPIキーを作成する

Resendのウェブサイトにアクセスし、アカウントにサインアップします。
ResendダッシュボードのAPI Keysセクション（https://resend.com/api-keys）に移動します。
Create API Keyをクリックします。
APIキーにわかりやすい名前を付けます（例：my-app-key）。
権限レベルを選択します：
Full access：すべてのAPIアクション（リソースの作成、削除、取得、更新）を許可します。注意して使用してください。通常、バックエンド管理タスクにのみ必要です。
Sending access：メール送信のみを許可します。これはアプリケーションの送信ロジックに推奨される権限です。必要に応じて、このキーを特定の認証済みドメインからの送信のみに制限することもできます。
Createをクリックします。
重要：ResendはAPIキーを一度だけ表示します。すぐにコピーし、安全な場所に保管してください（例：環境変数、シークレットマネージャー）。コードベースに直接コミットしないでください。

2. ドメインを認証する

プロフェッショナルに見え、スパムフィルターを回避するメールを送信するには、所有するドメインを認証することが必須です。認証されていないドメインやonboarding@resend.devのようなデフォルトアドレスからの送信は、初期テストにのみ適しています。

ResendダッシュボードのDomainsセクション（https://resend.com/domains）に移動します。
Add Domainをクリックし、メールを送信したいドメインを入力します（例：yourcompany.com）。
リストからDNSプロバイダーを選択するか、「Other」を選択します。
Resendは、ドメインのDNS設定に追加する必要のあるDNSレコード（通常、SPF用のMX、TXT、DKIM用のCNAME/TXT）を提供します。
SPF（Sender Policy Framework）：ドメインに代わってメールを送信することを許可されているメールサーバーを指定します。
DKIM（DomainKeys Identified Mail）：メールにデジタル署名を追加し、受信サーバーがメールが改ざんされておらず、許可されたサーバーから送信されたことを確認できるようにします。
ドメインレジストラまたはDNSプロバイダー（例：GoDaddy、Cloudflare、Namecheap）にログインし、Resendが提供するレコードを追加します。
DNSの変更が反映されるまでには時間がかかる場合があります（数分から数時間、場合によっては最大48時間）。
レコードが追加されたら、ResendのDomainsダッシュボードに戻り、ドメインの横にあるVerifyボタンをクリックします。ResendはDNSレコードが正しく設定されているかを確認します。認証されると、ステータスが更新され、そのドメインに関連付けられたアドレス（例：support@yourcompany.com、noreply@yourcompany.com）からメールを送信できるようになります。

3. テストメールを送信する

開発中は、ドメインの評判に影響を与えたり、誤って実際のユーザーに送信したりすることなく、メール送信をテストすることが重要です。Resendは、さまざまなシナリオをテストするための特別なメールアドレスを提供しています。

Test Delivered：delivered@resend.devに送信します。これは、正常に配信されたメールをシミュレートします。
Test Bounced：bounced@resend.devに送信します。これは、ハードバウンス（例：受信者アドレスが存在しない）をシミュレートし、バウンスイベントをトリガーします。
Test Marked as Spam：complained@resend.devに送信します。これは、受信者がメールをスパムとしてマークしたことをシミュレートし、苦情イベントをトリガーします。

これらのテストアドレスを使用することで、統合を確認し、バウンスおよび苦情イベントのWebhookハンドラーを安全にテストできます。

フレームワークとのResend統合

Resendは、さまざまな言語やフレームワーク向けに公式SDKと簡単な統合方法を提供しています。提供されたドキュメントに基づいて、いくつかの一般的な例を取り上げます。コアコンセプトは通常、以下の通りです。

Resend SDKをインストールする（利用可能な場合）か、標準のHTTPリクエストを使用します。
APIキーを使用してResendクライアントを初期化します（通常、環境変数から安全に読み込みます）。
emails.sendメソッド（または同等のメソッド）を、from、to、subject、htmlまたはreactなどのパラメータとともに呼び出します。

Next.jsでの送信

Next.jsは人気のReactフレームワークです。Resendは、特にReact Emailとの統合が優れています。

1. インストール：

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. メールテンプレートを作成する（オプションですが推奨）：React Emailを使用するか、メール本文用のシンプルなReactコンポーネントを作成します。

// components/email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Welcome, {firstName}!</h1>
  </div>
);

3. APIルートを作成する：メールを送信するためのAPIルートハンドラーを作成します。

App Router：app/api/send/route.ts
Pages Router：pages/api/send.ts

// app/api/send/route.ts (App Router 例)
import { EmailTemplate } from '../../../components/email-template'; // 必要に応じてパスを調整
import { Resend } from 'resend';

// .env.localにRESEND_API_KEYが設定されていることを確認
const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
  try {
    const { data, error } = await resend.emails.send({
      from: 'Your Name <you@yourverifieddomain.com>', // 認証済みドメインを使用
      to: ['delivered@resend.dev'], // 受信者またはテストアドレスに置き換え
      subject: 'Hello from Resend and Next.js!',
      react: EmailTemplate({ firstName: 'Test' }), // テンプレートにpropsを渡す
      // または、`html`を使用:
      // html: '<strong>It works!</strong>'
    });

    if (error) {
      return Response.json({ error }, { status: 400 });
    }

    return Response.json(data);
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

// pages/api/send.ts (Pages Router 例 - インポート/レスポンスを適応)
// import type { NextApiRequest, NextApiResponse } from 'next';
// import { EmailTemplate } from '../../components/EmailTemplate';
// import { Resend } from 'resend';
//
// const resend = new Resend(process.env.RESEND_API_KEY);
//
// export default async (req: NextApiRequest, res: NextApiResponse) => {
//   try { // エラーハンドリングのためにtry...catchを追加
//     const { data, error } = await resend.emails.send({
//       from: 'Your Name <you@yourverifieddomain.com>',
//       to: ['delivered@resend.dev'],
//       subject: 'Hello world',
//       react: EmailTemplate({ firstName: 'John' }),
//     });
//
//     if (error) {
//       return res.status(400).json(error);
//     }
//
//     res.status(200).json(data);
//   } catch (e) {
//      res.status(500).json({ error: 'Internal Server Error' });
//   }
// };

4. トリガー：フロントエンドから（例：フォーム送信後）、fetchまたはaxiosのようなライブラリを使用してこのAPIエンドポイントを呼び出します。プレースホルダーの値は、実際の認証済みドメインと受信者リストに置き換えることを忘れないでください。

Astroでの送信

Astroはモダンな静的サイトビルダーですが、サーバーサイドレンダリング（SSR）もサポートしています。

1. Resendをインストールする：

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. SSRアダプターをインストールする：Astroは、オンデマンドでサーバーサイドコードを実行するためにSSRアダプターが必要です。デプロイターゲットに適したものをインストールしてください（例：@astrojs/node、@astrojs/vercel、@astrojs/cloudflare）。

npx astro add node # Node.jsアダプターの例

astro.config.mjsでアダプターのセットアップ手順に従ってください。

3. APIキーを追加する：RESEND_API_KEYを.envファイルに保存します。

4. Astroアクションを作成する：Astroアクション（執筆時点では実験的機能、現在の状況についてはAstroドキュメントを確認してください）または標準のAPIエンドポイントを使用します。

// src/actions/index.ts (Astro Actionsを使用)
import { ActionError, defineAction, z } from 'astro:actions';
import { Resend } from 'resend';

// import.meta.env経由でRESEND_API_KEYが利用可能であることを確認
const resend = new Resend(import.meta.env.RESEND_API_KEY);

export const server = {
  send: defineAction({
    // 例: 必要に応じて入力検証を定義
    // input: z.object({ email: z.string().email() }),
    handler: async (/* { email } - 入力を使用する場合 */) => {
      try { // try...catchを追加
        const { data, error } = await resend.emails.send({
          from: 'Your Name <you@yourverifieddomain.com>',
          to: ['delivered@resend.dev'], // 受信者に置き換え
          subject: 'Hello from Resend and Astro!',
          html: '<strong>Astro works!</strong>',
          // AstroでReactを設定している場合は、Reactテンプレートも使用できます
          // react: <YourAstroCompatibleReactEmail firstName="Astro" />
        });

        if (error) {
          console.error("Resend Error:", error); // エラーをログ出力
          // ActionErrorをスローすると、Astroがエラーを適切に処理するのに役立ちます
          throw new ActionError({
            code: 'BAD_REQUEST', // またはエラーに基づいてより具体的に
            message: error.message || 'Failed to send email',
          });
        }

        return data; // 成功データを返す
      } catch (e) {
         console.error("Handler Error:", e);
         // 再スローするか、新しいActionErrorをスローする
         throw new ActionError({
             code: 'INTERNAL_SERVER_ERROR',
             message: 'An unexpected error occurred.',
         });
      }
    },
  }),
};

// 代替案: APIエンドポイント (例: src/pages/api/send.ts)
// import type { APIRoute } from 'astro';
// import { Resend } from 'resend';
//
// const resend = new Resend(import.meta.env.RESEND_API_KEY);
//
// export const POST: APIRoute = async ({ request }) => {
//   // const body = await request.json(); // データがリクエストボディから来る場合
//   try {
//     const { data, error } = await resend.emails.send({ /* ... メールパラメータ ... */ });
//     if (error) {
//       return new Response(JSON.stringify(error), { status: 400 });
//     }
//     return new Response(JSON.stringify(data), { status: 200 });
//   } catch (e) {
//     return new Response(JSON.stringify({ message: "Server Error"}), { status: 500 });
//   }
// }

5. トリガー：Astroコンポーネントやページから、通常はフォーム送信ハンドラー内でアクションまたはエンドポイントを呼び出します。

Bunでの送信

Bunは、ビルトインのバンドラー、トランスパイラー、タスクランナー、npmクライアントを備えた高速JavaScriptランタイムです。

1. インストール：

bun install resend

2. メールテンプレートを作成する（オプション）：Next.jsと同様に、Reactメールテンプレート用の.tsxファイルを作成できます。

// email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Welcome, {firstName}!</h1>
  </div>
);

3. Bunサーバスクリプトを作成する：Bunを使用してシンプルなHTTPサーバを実行するスクリプト（例：index.tsx）を作成します。

// index.tsx
import { Resend } from 'resend';
import { EmailTemplate } from './email-template'; // 同じディレクトリにあると仮定

// 環境変数からAPIキーを読み込む
const resendApiKey = process.env.RESEND_API_KEY;
if (!resendApiKey) {
  console.error("Error: RESEND_API_KEY environment variable not set.");
  process.exit(1); // キーがない場合は終了
}
const resend = new Resend(resendApiKey);

const server = Bun.serve({
  port: 3000,
  async fetch(req) { // 'req'引数を追加
    // オプション: リクエストメソッド、パスなどをチェック
    // if (new URL(req.url).pathname !== '/send') {
    //   return new Response("Not Found", { status: 404 });
    // }
    // if (req.method !== 'POST') {
    //    return new Response("Method Not Allowed", { status: 405 });
    // }

    try {
      const { data, error } = await resend.emails.send({
        from: 'Your Name <you@yourverifieddomain.com>',
        to: ['delivered@resend.dev'],
        subject: 'Hello from Resend and Bun!',
        react: EmailTemplate({ firstName: 'Bun User' }),
        // またはhtmlを使用: '<strong>Bun works!</strong>'
      });

      if (error) {
        console.error("Resend Error:", error);
        // 適切なJSONエラーレスポンスを返す
        return new Response(JSON.stringify({ error: error.message || 'Failed to send email' }), {
          status: 500, // またはエラーの種類に応じて400
          headers: { 'Content-Type': 'application/json' },
        });
      }

      // 成功レスポンスを返す
      return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' },
      });

    } catch (e) {
        console.error("Server Error:", e);
        return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
          status: 500,
          headers: { 'Content-Type': 'application/json' },
        });
    }
  },
  error(error) { // サーバ自体の基本的なエラーハンドラを追加
      return new Response(`<pre>${error}\\\\n${error.stack}</pre>`, {
          headers: { "Content-Type": "text/html" },
      });
  },
});

console.log(`Listening on <http://localhost>:${server.port} ...`);

4. 実行：RESEND_API_KEY=your_api_key bun run index.tsxを使用してサーバを起動します。http://localhost:3000にアクセスするか（または定義した特定のルート/メソッドをトリガーする）、メールが送信されます。

Nuxtでの送信

Nuxtは人気のVue.jsフレームワークです。

1. インストール：

npm install resend
# or
yarn add resend
# or
pnpm add resend

2. サーバールートを作成する：Nuxtはバックエンドロジックにserver/ディレクトリを使用します。server/api/send.post.tsのようなファイルを作成します（.postはPOSTリクエストを処理することを示します）。

// server/api/send.post.ts
import { Resend } from 'resend';

// APIキーを安全にアクセスする（例: nuxt.config.tsのruntimeConfig経由）
// 参照: <https://nuxt.com/docs/guide/going-further/runtime-config>
const config = useRuntimeConfig();
const resend = new Resend(config.resendApiKey); // runtime configにキーが設定されていると仮定

export default defineEventHandler(async (event) => {
  // オプション: データがリクエストから来る場合はボディを読み込む
  // const body = await readBody(event);

  try {
    const data = await resend.emails.send({
      from: 'Your Name <you@yourverifieddomain.com>',
      to: ['delivered@resend.dev'],
      subject: 'Hello from Resend and Nuxt!',
      html: '<strong>Nuxt works!</strong>',
      // Vueメールテンプレートを統合できます（例: vue-emailを使用）
      // 参照: <https://github.com/Dave136/vue-email>
    });

    // Nuxt 3は自動的にデータをJSONとして返すのを処理します
    return data;

  } catch (error: any) { // 可能であれば特定のエラータイプをキャッチ
    console.error("Resend Error:", error);
    // Nuxtが処理できるエラーをスローし、ステータスコードを設定
    throw createError({
        statusCode: 400, // または500
        statusMessage: 'Failed to send email',
        data: error // オプションでエラー詳細を含める
    });
  }
});

// nuxt.config.tsでruntimeConfigを定義:
// export default defineNuxtConfig({
//   runtimeConfig: {
//     resendApiKey: process.env.NUXT_RESEND_API_KEY, // サーバーサイドのみ
//     public: {
//       // クライアントサイドでアクセス可能な公開キー
//     }
//   }
// })
// そして.envにNUXT_RESEND_API_KEYを設定

3. トリガー：Nuxtのページやコンポーネントから、$fetchまたはuseFetchを使用して/api/sendエンドポイント（POSTメソッドを使用）を呼び出します。

Vercel Functionsでの送信

Vercel Functionsは、Next.jsとシームレスに統合されるか、スタンドアロンで使用できるサーバーレス関数です。上記のNext.jsの例は、Vercel環境内での使用法をすでに示しています。Next.jsを使用せずにVercel Functionsを使用する場合（例：静的サイトジェネレーターやVercelにデプロイされた別のフレームワークを使用する場合）、アプローチは似ています。

1. 関数を作成する：プロジェクトのapi/ディレクトリにファイルを作成します（例：api/send.ts）。

// api/send.ts (標準Vercel関数の例)
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { Resend } from 'resend'; // resendをインストールする必要があるかもしれません

// Vercel環境変数としてRESEND_API_KEYが設定されていることを確認
const resendApiKey = process.env.RESEND_API_KEY;

if (!resendApiKey) {
  console.error("RESEND_API_KEY is not set");
  // 本番環境でキーが不足している場合は続行しない
}

const resend = new Resend(resendApiKey);

export default async function handler(
  request: VercelRequest,
  response: VercelResponse,
) {
  // 推奨: POSTメソッドをチェック
  if (request.method !== 'POST') {
    return response.status(405).json({ message: 'Method Not Allowed' });
  }

  try {
    const { data, error } = await resend.emails.send({
      from: 'Your Name <you@yourverifieddomain.com>',
      to: ['delivered@resend.dev'],
      subject: 'Hello from Resend & Vercel Functions!',
      html: '<strong>It works on Vercel!</strong>',
      // 関数がReactをバンドルしている場合は、Reactテンプレートを使用できます
    });

    if (error) {
      console.error('Resend Error:', error);
      return response.status(400).json(error);
    }

    return response.status(200).json(data);

  } catch (e) {
    console.error('Handler Error:', e);
    return response.status(500).json({ message: 'Internal Server Error' });
  }
}

2. 環境変数を構成する：Vercelプロジェクト設定でRESEND_API_KEYを環境変数として追加します。

3. デプロイする：Vercel CLI（vercel）またはGit統合を使用してプロジェクトをデプロイします。

4. トリガー：デプロイされた関数URL（例：https://your-project.vercel.app/api/send）にPOSTリクエストを行います。

Supabase Edge Functionsでの送信

Supabase Edge Functionsは、ユーザーの近くにあるDeno Deployで実行されます。これらはDenoとfetchのような標準Web APIを使用します。Resendにはまだ公式のDeno SDKがないため、fetchを直接使用します。

1. Supabase関数を作成する：Supabase CLIを使用します。

supabase functions new resend-email-sender # 名前を選択
cd supabase/functions/resend-email-sender

2. ハンドラーを編集する：生成されたindex.tsファイルを変更します。

// supabase/functions/resend-email-sender/index.ts
import { serve } from "<https://deno.land/std@0.177.0/http/server.ts>"; // 適切なstdバージョンを使用

// Supabase Edge Functionの環境変数経由でAPIキーを安全にアクセス
const RESEND_API_KEY = Deno.env.get('RESEND_API_KEY');

// 基本的なリクエストハンドラー
const handler = async (_request: Request): Promise<Response> => {
  if (!RESEND_API_KEY) {
      console.error("RESEND_API_KEY environment variable not set.");
      return new Response(JSON.stringify({ error: "Server configuration error" }), {
          status: 500, headers: { 'Content-Type': 'application/json' }
      });
  }

  // オプション: 必要に応じて_requestメソッド、ヘッダー、またはボディをチェック

  try {
    const res = await fetch('<https://api.resend.com/emails>', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${RESEND_API_KEY}` // ここでキーを使用
        },
        body: JSON.stringify({
            from: 'Your Name <you@yourverifieddomain.com>',
            to: ['delivered@resend.dev'], // 受信者を置き換え
            subject: 'Hello from Resend & Supabase Edge!',
            html: '<strong>It works! Edge Functions are cool.</strong>',
            // 注意: Edge関数内でビルドステップなしにReactコンポーネントを直接送信することはできません
            // HTMLにレンダリングするため。
            // 事前レンダリングされたHTMLまたはプレーンテキストを送信してください。
        })
    });

    // Resend APIからの非OK応答の可能性を処理
    if (!res.ok) {
        const errorData = await res.json().catch(() => ({ message: 'Failed to parse Resend error response' }));
        console.error("Resend API Error:", res.status, errorData);
        return new Response(JSON.stringify({ error: 'Failed to send email via Resend', details: errorData }), {
            status: res.status, // Resendのステータスコードを転送
            headers: { 'Content-Type': 'application/json' },
        });
    }

    // 成功応答を解析
    const data = await res.json();

    // 成功応答を返す
    return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' },
    });

  } catch (error) {
      console.error("Edge Function Error:", error);
      return new Response(JSON.stringify({ error: 'Internal Server Error in Edge Function' }), {
          status: 500,
          headers: { 'Content-Type': 'application/json' },
      });
  }
};

// サーバを起動
serve(handler);
console.log("Supabase Edge Function 'resend-email-sender' is running...");

3. 環境変数を設定する：ローカルでsupabase secrets set RESEND_API_KEY your_actual_keyを使用してRESEND_API_KEYを設定し、デプロイのためにSupabaseプロジェクトのFunction設定でも設定します。

4. デプロイ＆呼び出し：

# ローカルでテスト (オプション)
supabase functions serve resend-email-sender --no-verify-jwt

# デプロイ
supabase functions deploy resend-email-sender --no-verify-jwt

フロントエンドからのSupabaseクライアントライブラリ呼び出しや別のバックエンドサービス経由で、関数のURLを使用して呼び出します。

Cloudflare Workersでの送信

Cloudflare Workersは、Cloudflareのエッジネットワークで実行されるサーバーレス関数です。ResendのNode.js SDKは、適切なバンドルを行うことでWorker環境でも動作することがよくあります。

1. Workerプロジェクトをセットアップする：npm create cloudflareなどを使用してWorkerプロジェクトを初期化します。モジュールとバンドル（例：WranglerとWebpackまたはesbuildを使用）が設定されていることを確認します。

2. Resendをインストールする：

npm install resend
# or yarn/pnpm

3. メールテンプレートを作成する（オプション）：Reactを使用している場合は、テンプレートファイル（.tsx）を作成します。

4. Workerスクリプトを編集する：メインのWorkerファイル（例：src/index.tsまたはReactを使用している場合はsrc/index.tsx）を変更します。

// src/index.tsx (Reactを使用した例)
import { Resend } from 'resend';
// Reactテンプレートコンポーネントがあると仮定
import { EmailTemplate } from './emails/email-template'; // パスを調整

// 型安全性のために期待される環境変数を定義
export interface Env {
  RESEND_API_KEY: string;
}

export default {
  async fetch(
    request: Request,
    env: Env, // 'env'経由で環境変数にアクセス
    ctx: ExecutionContext
  ): Promise<Response> {

    // 環境変数からのAPIキーを使用してResendをインスタンス化
    const resend = new Resend(env.RESEND_API_KEY);

    // オプション: リクエストメソッド、URLパスなどをチェック
    // 例: 特定のパスへのPOSTリクエストのみを許可
    // const url = new URL(request.url);
    // if (url.pathname !== '/send-email' || request.method !== 'POST') {
    //   return new Response('Not Found or Method Not Allowed', { status: 404 });
    // }

    try {
      const { data, error } = await resend.emails.send({
        from: 'Your Name <you@yourverifieddomain.com>',
        to: ['delivered@resend.dev'], // 受信者を置き換え
        subject: 'Hello from Resend & Cloudflare Workers!',
        // 該当する場合はReactコンポーネントを使用
        react: <EmailTemplate firstName="Worker User" />,
        // またはHTMLを使用
        // html: '<strong>It works from the Edge!</strong>',
      });

      if (error) {
        console.error("Resend Error:", JSON.stringify(error));
        return Response.json({ error: 'Failed to send email via Resend' }, { status: 400 });
      }

      return Response.json(data);

    } catch (e) {
      console.error("Worker Error:", e);
      // 可能であればエラーのスタックトレースをログ出力
      if (e instanceof Error) {
         console.error(e.stack);
      }
      return Response.json({ error: 'Internal Server Error in Worker' }, { status: 500 });
    }
  },
} // satisfies ExportedHandler<Env>; // オプション: 型チェックを強化するためにsatisfiesを使用

5. 環境変数を構成する：Wranglerを使用してWorkerのシークレットとしてRESEND_API_KEYを設定します。

npx wrangler secret put RESEND_API_KEY
# プロンプトが表示されたらキーを貼り付け

6. デプロイする：

npx wrangler deploy # またはローカルテストの場合は 'wrangler dev'

割り当てられたURLを使用してWorkerを呼び出します。

AWS Lambdaでの送信

AWS Lambdaドキュメントページのスクレイピングがタイムアウトしたため、このセクションは一般的な原則に基づいています。

AWS LambdaからResendを使用してメールを送信する場合も、同様のパターンに従います。

1. Lambda関数をセットアップする：好みのランタイム（Node.jsは一般的でResend SDKと相性が良い）を使用してLambda関数を作成します。Lambdaがインターネットアクセスできることを確認します（例：NAT Gatewayを備えたVPC内に構成するか、エグレスを許可するデフォルトのVPC設定を使用します）。

2. Resend SDKをインストールする：関数のデプロイパッケージにresendを含めます（例：package.jsonに含め、zipする前にnpm installを実行するか、Lambda Layersを使用します）。

3. APIキーを安全に保管する：AWS Secrets ManagerまたはAWS Systems Manager Parameter Storeを使用してRESEND_API_KEYを保管します。Lambda関数の実行ロールに、このシークレットを読み取る権限を付与します。Lambda関数コードにキーをハードコードしないでください。

4. Lambdaハンドラーコードを記述する（Node.jsの例）：

// lambda_function.js (Node.jsの例)
const { Resend } = require('resend');
// AWS SDKクライアント (Secrets Manager/Parameter Storeからキーを取得する場合)
const { SecretsManagerClient, GetSecretValueCommand } = require("@aws-sdk/client-secrets-manager"); // V3 SDK

let resend; // 再利用の可能性のためにハンドラーの外で初期化

async function getApiKey() {
    // シークレット名/ARNとリージョンを置き換え
    const secretName = "your/resend/api/key/secret";
    const client = new SecretsManagerClient({ region: "your-region" });
    try {
        const command = new GetSecretValueCommand({ SecretId: secretName });
        const response = await client.send(command);
        if ('SecretString' in response) {
            // シークレットがキーを直接、またはJSON形式で保存していると仮定 {"apiKey": "re_..."}
            const secret = JSON.parse(response.SecretString);
            return secret.apiKey; // 保存方法に基づいて解析を調整
        }
        throw new Error("API Key not found in secret string");
    } catch (error) {
        console.error("Error retrieving API Key from Secrets Manager:", error);
        throw error; // 失敗を示すために再スロー
    }
}

exports.handler = async (event, context) => {
    // オプション: 必要に応じてイベントデータを解析 (例: API Gatewayトリガーから)
    // const body = JSON.parse(event.body || '{}');
    // const recipient = body.to;

    try {
        if (!resend) {
            const apiKey = await getApiKey();
            if (!apiKey) {
                return { statusCode: 500, body: JSON.stringify({ message: "API Key configuration error" }) };
            }
            resend = new Resend(apiKey);
        }

        const { data, error } = await resend.emails.send({
            from: 'Your Name <you@yourverifieddomain.com>',
            to: ['delivered@resend.dev'], // イベントからの受信者または固定値を使用
            subject: 'Hello from Resend & AWS Lambda!',
            html: '<strong>Lambda email sent successfully!</strong>',
            // Reactは、Lambda内でのビルドステップまたはサーバーサイドレンダリングのセットアップが必要です
        });

        if (error) {
            console.error('Resend Error:', error);
            return {
                statusCode: 400, // またはエラーに応じた適切なステータス
                body: JSON.stringify(error),
            };
        }

        return {
            statusCode: 200,
            body: JSON.stringify(data),
             headers: { 'Content-Type': 'application/json' },
        };

    } catch (e) {
        console.error('Lambda Handler Error:', e);
        return {
            statusCode: 500,
            body: JSON.stringify({ message: 'Internal Server Error' }),
        };
    }
};

5. トリガーを構成する：Lambda関数のトリガーを設定します（例：HTTPリクエスト用のAPI Gateway、SQSキュー、EventBridgeイベント）。

6. デプロイする：Lambda関数とその依存関係をデプロイします。

ResendでReact Emailを使用する

Resendの大きな利点は、React Emailとのシームレスな統合です。React Emailを使用すると、標準のReactコンポーネントと構文を使用して、美しくレスポンシブなメールテンプレートを構築できます。

利点：

コンポーネントベース：再利用可能なコンポーネントを使用して、ウェブアプリのようにメールを構築できます。
型安全性：TypeScriptを使用して、より堅牢なテンプレートを作成できます。
ローカル開発：ブラウザでローカルにメールを開発およびプレビューできます。
複雑なテンプレート言語は不要：独自のまたは複雑なメールテンプレート構文を回避できます。

セットアップ（React Emailドキュメントに基づく - 多少異なる場合があります）：

インストール：react-emailとそのコアコンポーネントをプロジェクトに追加します。それらを介して送信する場合は、resendも必要になるでしょう。

npm install react-email @react-email/components resend
# or yarn/pnpm

メールテンプレートを作成する：通常、専用のemails/ディレクトリに、メール用の.tsxファイルを作成します。

// emails/welcome.tsx
import { Html, Button, Text } from '@react-email/components';
import * as React from 'react';

interface WelcomeEmailProps {
  name: string;
  signupLink: string;
}

export const WelcomeEmail: React.FC<Readonly<WelcomeEmailProps>> = ({ name, signupLink }) => (
  <Html>
    <Text>Hello {name},</Text>
    <Text>Welcome aboard! Click the button below to get started.</Text>
    <Button href={signupLink}>Complete Signup</Button>
  </Html>
);

export default WelcomeEmail; // デフォルトエクスポートはよく役立ちます

送信ロジックと統合する：バックエンドAPIルートまたはサーバーレス関数で、メールコンポーネントをインポートし、Resendのreactオプションに渡します。

// Next.js APIルートでの例 (app/api/send-welcome/route.ts)
import { Resend } from 'resend';
import WelcomeEmail from '../../../emails/welcome'; // パスを調整

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(request: Request) {
  try {
    const body = await request.json(); // ボディに { email: '...', name: '...' } があると仮定
    const signupUrl = "<https://yoursite.com/signup-step2>"; // 例のURL

    const { data, error } = await resend.emails.send({
      from: 'Your App <welcome@yourverifieddomain.com>',
      to: [body.email],
      subject: 'Welcome to Our Platform!',
      // Reactコンポーネントを直接渡す
      react: WelcomeEmail({ name: body.name, signupLink: signupUrl }),
    });

    if (error) {
      return Response.json({ error }, { status: 400 });
    }
    return Response.json(data);
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

Resend（およびReact Emailをスタンドアロンで使用する場合のビルドプロセス）は、舞台裏でReactコンポーネントをメールセーフなHTMLにレンダリングする処理を行います。これにより、メールテンプレートの作成と保守における開発者体験が大幅に向上します。

結論

Resendは、メール送信のためのモダンで開発者中心のソリューションを提供します。そのクリーンなAPI、優れたフレームワーク統合（特にReact Emailとの統合）、配信到達率への注力、そしてテストメールやWebhookのような役立つ機能により、あらゆる規模のアプリケーションにとって魅力的な選択肢となっています。

このガイドで概説した手順（アカウントのセットアップ、ドメインの認証、フレームワークに適した統合方法の選択、React Emailのようなツールの活用）に従うことで、プロジェクトに堅牢なメール機能を迅速かつ確実に統合できます。常にAPIキーを安全に扱い、ResendダッシュボードとWebhookを通じて送信アクティビティを監視し、最適な配信到達率とユーザー体験を確保することを忘れないでください。

💡

button