Resendを使って簡単にメール送信を実装する方法

はじめに

Webアプリを開発していると、本人確認やパスワードリセット、通知など、ユーザーへメールを送信したい場面が多々あります。 しかし自前でメールサーバーを運用するのは管理コストが高く、AWS SESなどの既存サービスは設定が複雑で初心者には少しハードルが高いのが現状です。

本記事では、Resendというサービスを使ってメール送信機能を簡単に実装する方法を解説します。

Resendとは？

ResendはモダンなWeb開発者向けに設計されたメール配信サービスです。
特にReactなど最新のWeb開発ツールとの親和性が高く、シンプルなAPI操作で簡単にメール送信を行うことができます。

Resendを使用するにはアカウント登録が必要です。

対応言語

今回はNext.js（Node.js）での実装方法を解説しますが、RubyやJavaなどでも利用可能です。
以下のページから各言語ごとのSDKを確認できます。

プランについて

Resendには無料プランがあるので気軽に試すことができます。
無料プランには以下の制約がありますが、試作段階のアプリであれば十分に利用可能です。

• 月間送信数: 3,000通
• 日次制限: 100通/日
• ドメイン数: 1個
• サポート: メールサポート
• 適用用途: 個人プロジェクト、テスト環境

その他プランの詳細、料金体系はこちらをご確認ください。

Next.jsでResendを使ってみる

それではNext.jsでResendを使う方法を解説します。

Resendをインストール

まずはResendのSDKをインストールします。

pnpm add resend

次にResendのAPIの管理画面を開き、APIキーを発行しましょう。

Name

APIキーの名前です。適当な名前を付けてください。

Permission

APIキーの権限設定です。Full access と Sending access から選択します。
それぞれの違いは以下の通りです。

Sending access

• メールの送信のみが可能
• 最も制限された権限で、本番環境で推奨されるレベル
• メール送信以外の操作（ドメイン管理、APIキー管理など）はできない

Full access

• すべてのAPI操作が可能

• メール送信、ドメインの追加・削除、APIキーの作成・削除、Webhookの設定など

• 管理作業には必要だが、セキュリティリスクが高い

Domain

送信元ドメインの制限設定です。

AddをクリックするとAPIキーが発行されるのでコピーしてください。

.envファイルにAPIキーを貼り付けます。

.env

RESEND_API_KEY=***

APIキーは外部に漏らさないように注意してください。

以上で準備は完了です。

メールテンプレートを作ろう

Reactでメールテンプレートを作成するには@react-email/componentsというパッケージが必要となるのでインストールしてください。

pnpm add @react-email/components

それではテンプレートを作成していきましょう。
今回は例としてウェルカムメールのテンプレートを作成します。

components/email/welcome.tsx

import { Body, Button, Container, Head, Heading, Hr, Html, Preview, Section, Tailwind, Text } from '@react-email/components'

interface WelcomeProps {
  userName: string
}

export default function Welcome({ userName }: WelcomeProps) {
  return (
    <Html lang="ja">
      <Head />
      <Preview>ご登録ありがとうございます</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-gray-100 font-sans">
          <Container className="mx-auto my-[40px] w-[465px] rounded border border-[#eaeaea] border-solid bg-white p-[20px]">
            <Section className="mt-[32px]">
              <Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
                ようこそ!
              </Heading>
            </Section>

            <Text className="text-[14px] text-black leading-[24px]">
              {userName} 様
            </Text>

            <Text className="text-[14px] text-black leading-[24px]">
              ご登録ありがとうございます。アカウントの作成が完了しました。
            </Text>

            <Text className="text-[14px] text-black leading-[24px]">
              今すぐサービスをご利用いただけます。以下のボタンからダッシュボードにアクセスしてください。
            </Text>

            <Section className="mt-[32px] mb-[32px] text-center">
              <Button
                className="rounded bg-[#007ee6] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
                href="https://myapp.com/dashboard"
              >
                ダッシュボードを開く
              </Button>
            </Section>

            <Hr className="mx-0 my-[26px] w-full border border-[#eaeaea] border-solid" />

            <Text className="text-[#666666] text-[12px] leading-[24px]">
              ご不明な点がございましたら、お気軽にお問い合わせください。
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

このように@react-email/componentsのコンポーネントを使ってHTMLメールを作成します。
Tailwindコンポーネントで囲えば、その中でTailwind CSSを使うことも可能です。

それでは作成したメールテンプレートをプレビューしてみます。
プレビューするには以下のパッケージが必要です。

pnpm add -D react-email
pnpm add -D @react-email/preview-server

package.jsonのscriptsに以下を記述します。
これでメールのプレビューサーバーが起動できるようになります。

package.json

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
+ "email:dev": "email dev --port 3001 --dir components/email"
}

デフォルトだと3000ポートでプレビューサーバーが起動しますが、Next.jsの開発サーバーも3000ポートなのでバッティングしないようにportオプションで別のポート（今回は3001）を指定しています。dirオプションはメールテンプレートが格納されているディレクトリを指定してください。

それではプレビューサーバーを起動しましょう

pnpm email:dev

ブラウザで localhost:3001 にアクセスしてください。
以下のようにメールテンプレートをプレビューすることができます。
ダークモードやモバイルでの外観も確認可能です。

メールを送信

まずはメール送信用モジュールを作成します。

lib/email.ts

import 'server-only'
import { Resend } from 'resend'

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

interface SendEmailProps {
  to: string
  subject: string
  template: React.ReactNode
}

export async function sendEmail({ to, subject, template }: SendEmailProps) {
  return await resend.emails.send({
    from: '[e-mail]',
    to,
    subject,
    react: template
  })
}

import 'server-only' はそのモジュールがサーバサイドからしかインポートできないようにするための設定です。誤ってクライアントコンポーネントからインポートした場合は例外が発生するようになります。

メールを送信するには以下のようにします。

import { sendEmail } from '@/lib/email'
import Welcome from '@/components/email/welcome'

await sendEmail({
  to: '[e-mail]',
  subject: 'ようこそ！',
  template: Welcome({ userName: '山田 太郎' })
})

先程作成したウェルカムメールのテンプレートを使ってメールを送信しています。
今回はサンプルなので送信先のメールアドレスやユーザー名は固定値を指定してますが、実際には動的にしましょう。

送信されたメールの確認

Resendのコンソール画面から送信されたメール履歴や到達状況を確認できます。

さいごに

メール配信サービスには多くの選択肢がありますが、Resendは特に「開発者ファースト」という点で群を抜いています。複雑な設定画面に迷うことなく、APIキーひとつでサクッと実装を完了できるスピード感は、スピードが求められる現代のWeb開発において強力な武器になります。特にNext.js（App Router）環境で、型安全にメールを送りたいというニーズには現状、最適解の1つと言えるでしょう。