まるでAmazon配達員！信頼できるメール送信サービスResend

webアプリを作る際、認証などでメールのやり取りどうしようか調べていた時、Resendを見つけました。開発者の記事を見ていると、迷惑メールフォルダに入ったりエラーで届かなかったりする問題があるようで、Resendのようなメール送信専門のAPIサービスを使えばメールを確実に届けることができ（キャリアメールにも送信可能！）中身のロジックに集中できそうだと思い、今回使ってみることにしました。

Resendとは

Email を API 経由で送信するサービスです。SendGridやAWS SESに比べて新しく、特に開発者にとって使いやすいように設計されたモダンなサービスのようです。

無料枠でも月3,000通は送信でき、試してみるにはかなりいい条件だと思いました。また、React Emailと組み合わせることで、Reactコンポーネントを使ってメールのデザインができる（テンプレートあり）のも魅力的です。


テンプレート

フィッシングメールにも利用されてそう...

使い方

Domain登録

まず、ドメインを取得します。DNS設定を行いますので、取得後に以下をお読みください。僕はGooleWorkspaceから取得しました。Vercelからの取得をよく見かけます。

ドメイン登録は、ルートではなく「サブドメイン」を利用するのがベストプラクティスです。これにより、トピックや目的 (トランザクションやマーケティングなど) に基づいて適切な評判をセグメント化できます。

たとえば、大量に送るメールがもしスパム報告を受けたとしても、トランザクションメール（パスワードリセットなど）を送るサブドメインの評判には影響が出ません。他にも、サブドメインの利用には運用面・コスト面・管理面で多くのメリットがあります。

Resend SDK をインストール

pnpm add resend@4.5.1

バージョン確認

pnpm view resend versions | sed 's/[][], / /g' | tr ' ' '\n' | grep -v '^$' | tail -n 20

Resend アカウントにドメインを登録

1. 「Add domain」をクリック
2. 「Name」に取得したドメインを入力
3. 「Region」Tokyo を選択
4. 「Add domain」をクリック

3 件の DNS レコードが表示されると思います。

これを該当サイトにDNS設定して、「Verify DNS Records」をクリック。
DNS レコードを検証を開始します。
ステータスは「Pending」で、検証中となります。

今回は Google Worscpace からの取得で、Squarespaceへ設定します。
DNS レコードの検証は 5 分〜10 分ほどかかりました。

完了すれば、ステータスは「Verified」です。

Resend の API キーを設定

「API Keys」の画面に遷移し、「Create API Key」をクリックして、API キーを追加します。

1. API Key の名前を入力
2. Permission に権限を設定
3. ドメインを選択

※権限について

権限	Full access	Sending access
主な用途	開発、管理、アカウント設定など、全機能へのアクセスが必要な場合 実際にメールを送信するアプリケーションやサーバー	実際にメールを送信するアプリケーションやサーバー
操作	✅ メールの送信、設定の変更、過去の送信ログの閲覧	✅ メールの送信　❌ 設定の変更、過去の送信ログの閲覧
セキュリティ上の扱い	非常に機密性が高い。外部に漏れないよう厳重に管理が必要。	比較的リスクが低い。外部システムに組み込むのに適している。

.env に貼り付け。

RESEND_API_KEY=<apikey>

EmailをReactから送信

テスト用に以下を作成

$ mkdir -p src/app/api/send
$ touch src/app/api/send/route.ts

route.ts

import Email from "@/emails";
import { NextResponse } from "next/server";
import { Resend } from "resend";

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

export async function POST() {
  try {
    const data = await resend.emails.send({
      from: "[e-mail]",
      to: process.env.YOUR_EMAIL as string,
      subject: "Hello world",
      react: Email(),
    });

    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error });
  }
}

.envに追加

RESEND_API_KEY=<apikey>
+YOUR_EMAIL=<email>

メールを送信

ローカルサーバを起動させてメールが送信できるか確かめます。

pnpm dev

/api/send に POST リクエストを送信します。メールの送信 ID が返却されるので、この ID からメールの送信ステータスが確認できます。データベースなり保存しておくと良いです。※実際のメールも確認しましょう。

$ curl -X POST http://localhost:3000/api/send

{"id":"f12394bd-XXXX-XXXX-XXXX-XXXXXXXXXXXX"}

Resendに戻り、「Emails」にて送信されたメール一覧や内容を確認できます。

以上です。