こんにちは！HODAです！
先日、 Hugo + Resend を使って認証システムを作りました。備忘録も兼ねて、こちらに導入方法を整理します。
Resendとは？
Resendは、一言で言えば「開発者のためのメール送信API」です。
従来のメール送信サービスに比べ、開発者がモダンなアプリケーション（Webアプリやモバイルアプリなど）にメール送信機能を組み込むことを非常にシンプルにするよう設計されています。
Resendは多くのプログラミング言語やフレームワークに対応しており、以下のような環境ですぐに使い始めることができます：
- JavaScript/TypeScript: Node.js, Next.js, React, Express など
- その他の言語: Python, PHP (Laravel), Ruby (Rails), Go, Rust, Elixir, Java, .NET など
Resendでできること
Resendは単にメールを送るだけでなく、開発に役立つ強力な機能を備えています。
- メールの可視化と管理: 送信したメールのステータス（送信済み、開封、クリック、バウンスなど）をダッシュボード上で詳細に確認できます。
- ドメインの配信品質管理: 自分のドメインを認証し、メールが確実に相手の受信箱に届くよう管理できます。
- Reactを用いたテンプレート作成: Reactコンポーネントを使用してメールの見た目（HTMLテンプレート）を構築できるため、フロントエンド開発者にとって非常に扱いやすいのが特徴です。
- チームでの共有: 送信したメールの内容を、認証なしで48時間閲覧できる公開リンクとしてチームメンバーに共有する機能もあります。
導入の基本ステップ
Resendをプロジェクトに導入する際の基本的な流れは以下の通りです。
1. 事前準備（Prerequisites）
まずは公式サイトでアカウントを作成し、以下の2点を行う必要があります。
- APIキーの作成: アプリケーションからResendを呼び出すための認証キーを発行します。
- ドメインの認証: 自分が所有するドメインからメールを送れるように設定します。
2. SDKのインストール
例えば、Node.js環境であれば、以下のコマンドでSDKをインストールします。
npm install resend3. 実装の基本
もっともシンプルな送信コード（Next.jsなどの場合）は以下のようになります。APIキーを環境変数に設定し、resend.emails.send メソッドを呼び出すだけです。
import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
await resend.emails.send({
from: 'you@yourdomain.com',
to: 'recipient@example.com',
subject: 'Hello World',
html: '<p>Resendからの初メールです！</p>'
});初心者が知っておくべき「テスト送信」のコツ
開発中に本物のメールアドレスへ何度も送信すると、ドメインの評価（レピュテーション）が下がり、将来的にメールが「迷惑メール」扱いされるリスクがあります。
Resendでは、ドメインの評価を傷つけずにさまざまな状況をシミュレーションするためのテスト用アドレスが用意されています。
- 正常送信のテスト:
delivered@resend.dev宛に送る。 - バウンス（不達）のテスト:
bounced@resend.dev宛に送る。 - スパム扱いのテスト:
spam@resend.dev宛に送る。
これらを活用することで、本番環境を汚さずに安全に開発を進めることができます。
ヒント
実際にテスト環境や localhost の時には管理者のメールアドレス宛にしかテスト送信できません。
Resendを例えるなら、「スマートな国際郵便の発送窓口」です。 昔ながらの複雑な手続き（古いメールサーバーの設定）を知らなくても、宛先とメッセージを渡すだけで、あとはResendが最適なルートで確実に届けてくれ、さらに「今どこに荷物があるか」をリアルタイムで教えてくれるようなサービスです。
Next.jsプロジェクトにResendを導入
1. 事前準備（Prerequisites）
実装を始める前に、Resendのダッシュボードで以下の2点を済ませておく必要があります。
- APIキーの作成: アプリケーションからアクセスするための鍵を取得します。
- ドメインの認証: 送信元となる自分のドメインを登録・認証します。
ちなみに無料プランであっても、月間 3,000通のトランザクションメールを送信できるので、小さなプロジェクトであれば十分無料プランでOKです。
2. SDKのインストール
まず、プロジェクトのルートディレクトリで以下のコマンドを実行し、Resend Node.js SDKをインストールします。
npm install resend3. メールテンプレートの作成
Resendの特徴は、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>
);4. 送信処理の実装（API Route）
次に、メールを送信するためのAPIエンドポイントを作成します。App Routerを使用している場合は、app/api/send/route.ts に作成します（Pages Routerの場合は pages/api/send.ts）。
ここでは、環境変数 RESEND_API_KEY を使用してResendを初期化し、先ほど作成したテンプレートを使ってメールを送信します。
import { EmailTemplate } from '../../../components/EmailTemplate';
import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST() {
try {
const { data, error } = await resend.emails.send({
from: 'Acme <onboarding@resend.dev>', // 認証した自分のドメイン
to: ['delivered@resend.dev'], // 送信先
subject: 'Hello world',
react: EmailTemplate({ firstName: 'John' }), // Reactテンプレートを使用
});
if (error) {
return Response.json({ error }, { status: 500 });
}
return Response.json(data);
} catch (error) {
return Response.json({ error }, { status: 500 });
}
}5. 送信状態の確認とテスト
Next.jsから送信したメールがどうなったかは、Resendのダッシュボードで詳細に確認できます。
- メールイベントの把握: 送信したメールが「送信済み（sent）」、「配信済み（delivered）」、あるいは相手のサーバーに拒絶された「バウンス（bounced）」などの状態をログで追跡できます。
- テスト用アドレスの活用: 開発中は、自分のメールアドレスを汚さずに以下のテスト用アドレスを使って挙動を確認することをお勧めします。
- 成功テスト:
delivered@resend.dev宛に送ると、正常に届いた場合の挙動を確認できます。 - 不達テスト:
bounced@resend.dev宛に送ると、エラーが起きた際の処理をテストできます。
- 成功テスト:
Next.jsへの導入を例えるなら、「お店の裏側に専用の配送ラインを引く」ようなものです。
Reactという慣れ親しんだ道具（コンポーネント）で手紙を書き、Resendという専用の配送ライン（SDK/API）に流すだけで、あとは自動的に世界中へ届けてくれ、さらに「無事に届いたか」の受領証もリアルタイムで返ってくる、そんなスムーズな仕組みを構築できます。