Resend メール通知

NEXTY.DEV には Resend がメールサービスプロバイダーとして組み込まれており、よく使用されるユーティリティ関数とメールテンプレートがすでにラップされています。ゼロから設定する必要はなく、本記事の手順に従うだけで次のことが可能です:

• 独自のメールテンプレートを追加(例:注文通知、会員期限切れリマインダーなど)
• サーバーサイド Action でメールを送信
• 送信者情報、配信停止リンクなどがベストプラクティスに準拠していることを保証

前提条件

• メール通知機能を使用する前に、まず Resend 設定 を完了してください

一、全体アーキテクチャの概要

NEXTY.DEV において、メール関連のコアファイルは以下の通りです:

• Resend クライアントの初期化: lib/resend/index.ts
• 統一送信エントリーポイント & 連絡先管理: actions/resend/index.ts
• 具体的なビジネスシナリオ Action の例: actions/newsletter/index.ts
• React メールテンプレート: emails/*.tsx

Resend に関連するすべての呼び出しは actions/resend を経由することを推奨します。ビジネスロジック内で直接 new Resend() を使用しないでください。これにより以下が可能になります:

• API Key、送信者メールアドレス、配信停止ロジックの統一管理
• 複数の場所で Resend クライアントの設定を重複させることを回避

二、環境変数と基本設定

コードを書き始める前に、以下の環境変数が設定されていることを確認してください:

• RESEND_API_KEY: あなたの Resend API Key
• ADMIN_NAME: 送信者名(例: NEXTY.DEV Team)
• ADMIN_EMAIL: 送信者メールアドレス(例: [email protected])
• NEXT_PUBLIC_SITE_URL: サイトの完全なドメイン名、メール内の絶対リンク生成に使用

ローカル開発環境では、.env.local で以下のように設定できます(例):

RESEND_API_KEY=your_resend_api_key
ADMIN_NAME="NEXTY.DEV Team"
ADMIN_EMAIL="[email protected]"
NEXT_PUBLIC_SITE_URL=https://yourdomain.com

三、Resend クライアント: 統一エントリーポイント

NEXTY.DEV では lib/resend/index.ts で Resend クライアントがすでにラップされており、Key が不足している場合はコンソールに警告が表示されます。

他のファイルでは次のようにするだけです:

import resend from '@/lib/resend';

ただし、ほとんどのシナリオでこのインスタンスを直接使用する必要はなく、次のセクションで紹介する sendEmail メソッドを優先的に使用すべきです。

四、コア送信ツール: actions/resend/index.ts

actions/resend/index.ts はメール拡張を行う際の最も重要なファイルで、2つのメソッドを提供します:

• sendEmail: メールを送信し、同時にユーザーを Resend Contacts に追加
• removeUserFromContacts: Contacts からユーザーを削除(配信停止時によく使用)

sendEmail のパラメータ定義は以下の通りです(簡略化した説明):

interface SendEmailProps {
  email: string;                         // 受信者メールアドレス
  subject: string;                       // メール件名
  react: React.ComponentType<any> | React.ReactElement; // React メールテンプレート
  reactProps?: Record<string, any>;      // テンプレートに渡す props(オプション)
}

内部で以下のことを自動的に行います:

• email が空の場合、エラーを返す
• Resend 環境変数が正しく設定されていない場合、エラーを返す
• ADMIN_NAME + ADMIN_EMAIL を組み合わせて送信者を構成
• 受信者メールアドレスに基づいて配信停止トークンと配信停止リンクを生成
• resend.emails.send でメールを送信し、Header に標準の List-Unsubscribe フィールドを含める

五、組み込み例: Newsletter 購読のウェルカムメール

actions/newsletter/index.ts は完全な例を示しており、フローは概ね以下の通りです:

• ユーザー入力のメールアドレスを正規化して検証
• レート制限を実施(悪意のあるリクエストの防止)
• メール件名と配信停止リンクを準備
• sendEmail を呼び出して NewsletterWelcomeEmail テンプレートを送信

ロジックの断片説明(疑似コードレベル):

await sendEmail({
  email: normalizedEmail,
  subject: `Welcome to ${siteConfig.name} Newsletter!`,
  react: NewsletterWelcomeEmail,
  reactProps: {
    email: normalizedEmail,
    unsubscribeLink,
  },
});

独自のビジネスではこの書き方を完全に参考にでき、以下を置き換えるだけです:

• テンプレートコンポーネント(react フィールド)
• テンプレート props(reactProps)
• subject の文言

六、注意事項

• Resend の無料プランでは1000件の連絡先を保存でき、月間3000通まで送信可能です。これがニーズを満たさない場合、プランをアップグレードする必要があります。
• 新しいメールテンプレートを作成する際は、異なるメールテンプレート間でスタイルの一貫性を保つ必要があります。これはブランドイメージにとって最も有益です。
• メールテンプレート内のブランド情報は siteConfig.name と siteConfig.url を使用しているため、config/site.ts の設定が正しいことを確認する必要があります。
• メールテンプレートでは lucide-react を使用できません。SVG アイコンまたは画像の絶対リンクを使用してください。
• メールテンプレートでは tailwindcss を使用できません。インラインスタイルを使用してください。
• メールテンプレート内では相対リンクを使用できません。絶対リンクを使用してください。

新しいメールテンプレートを作成する際は、AI に既存のメールテンプレートを参照させて新しいテンプレートを作成させるだけで、各詳細を手動でチェックする必要はありません。