Zenn
✉️

Next.js Route HandlerでResendを使ったメール送信テスト

に公開
Next.js
API
email
Resend
記事投稿コンテスト「TypeScriptでやってみた挑戦・学び・工夫」
tech

はじめに

アプリケーション構築時のメール送信サービスといえばSendGridが有名ですが、登録、実装や認証がシンプルということで今回Resendを使用してみることにしました。
ResendはシンプルなAPIでメール送信ができるサービスです。

(参考) ResendとSendGridの比較
次世代の SendGrid !? メール送信プラットフォーム Resend
Supabaseでメール送信上限！？Custom SMTPにはResendをどうぞ
メール送信サービスのResendが日本でもまともに使えるようになったので紹介したい

この記事では、Next.jsのRoute Handlerを使って、テキスト・HTML・Reactの3つの形式でメール送信をテストしながら、Resendの実装方法を学習します。

事前準備

1. Resendのアカウント作成とAPIキー取得

Resendでアカウントを作成し、API Keysからテスト用のキーを取得します。

2. 環境変数の設定

.env.localにAPIキーを設定：

RESEND_API_KEY=re_xxxxxxxxxx

3. パッケージのインストール

npm install resend

テスト時の注意点

今回はテスト用のため、onboarding@resend.devを送信元として使用します。本番環境では：

  • 独自ドメインの認証が必要
  • テストドメインでは送信制限あり

1. テキストメール送信

app/api/test-text/route.ts

import { Resend } from 'resend';
import { NextResponse } from 'next/server';

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

export async function GET() {
  try {
    const data = await resend.emails.send({
      from: 'Test <onboarding@resend.dev>',
      to: ['your-email@example.com'],
      subject: 'テキストメールのテスト',
      text: 'これはテキスト形式のメールです。\n\nResendのテスト送信が成功しました！',
    });

    return NextResponse.json({ success: true, data });
  } catch (error) {
    return NextResponse.json({ success: false, error }, { status: 500 });
  }
}

2. HTMLメール送信

app/api/test-html/route.ts

import { Resend } from 'resend';
import { NextResponse } from 'next/server';

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

const emailHTML = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLメールテスト</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f4; font-family: Arial, sans-serif;">
  <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 8px; text-align: center; margin-bottom: 20px;">
      <h1 style="color: white; margin: 0;">📧 HTMLメールテスト</h1>
    </div>
    
    <div style="background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
      <p style="color: #333; font-size: 16px; line-height: 1.6; margin-top: 0;">
        これはHTML形式のメールです。スタイルが適用されています。
      </p>
      
      <div style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; border-left: 4px solid #28a745; margin: 20px 0;">
        <p style="color: #155724; margin: 0; font-weight: bold;">
          ✅ HTMLメール送信成功
        </p>
      </div>
      
      <p style="color: #666; font-size: 14px; text-align: center; margin-bottom: 0;">
        送信時刻: ${new Date().toLocaleString('ja-JP')}
      </p>
    </div>
  </div>
</body>
</html>
`;

export async function GET() {
  try {
    const data = await resend.emails.send({
      from: 'Test <onboarding@resend.dev>',
      to: ['your-email@example.com'],
      subject: 'HTMLメールのテスト',
      html: emailHTML,
    });

    return NextResponse.json({ success: true, data });
  } catch (error) {
    return NextResponse.json({ success: false, error }, { status: 500 });
  }
}

3. Reactメール送信

メールテンプレートコンポーネント

components/email/TestTemplate.tsx

import React from 'react';

const TestTemplate = () => {
  return (
    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
      <div style={{
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        padding: '20px',
        borderRadius: '8px',
        textAlign: 'center',
        marginBottom: '20px'
      }}>
        <h1 style={{ color: 'white', margin: 0 }}>⚛️ Reactメールテスト</h1>
      </div>
      
      <p style={{ color: '#333', fontSize: '16px', lineHeight: '1.6' }}>
        これはReact JSXで作成されたメールです。
      </p>
      
      <div style={{
        backgroundColor: '#f8f9fa',
        padding: '15px',
        borderRadius: '6px',
        borderLeft: '4px solid #007bff',
        margin: '20px 0'
      }}>
        <p style={{ color: '#004085', margin: 0, fontWeight: 'bold' }}>
          🚀 Reactメール送信成功
        </p>
      </div>
      
      <p style={{ color: '#666', fontSize: '14px', textAlign: 'center' }}>
        送信時刻: {new Date().toLocaleString('ja-JP')}
      </p>
    </div>
  );
};

export default TestTemplate;

Route Handler

app/api/test-react/route.ts

import { Resend } from 'resend';
import { NextResponse } from 'next/server';
import React from 'react';
import TestTemplate from '@/components/email/TestTemplate';

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

export async function GET() {
  try {
    const data = await resend.emails.send({
      from: 'Test <onboarding@resend.dev>',
      to: ['your-email@example.com'],
      subject: 'Reactメールのテスト',
      react: React.createElement(TestTemplate),
    });

    return NextResponse.json({ success: true, data });
  } catch (error) {
    return NextResponse.json({ success: false, error }, { status: 500 });
  }
}

テスト実行

各APIエンドポイントにブラウザでアクセスしてテスト：

  • http://localhost:3000/api/test-text
  • http://localhost:3000/api/test-html
  • http://localhost:3000/api/test-react

JSONレスポンスで送信結果を確認できます。

まとめ

Resendを使うことで、Next.jsから簡単にメール送信が実装できます。本番環境では：

  • 独自ドメインの認証設定
  • エラーハンドリングの強化
  • 送信ログの管理

などを追加して運用してください。

ResendはReact JSXでのメールテンプレート作成にも対応しており、コンポーネントベースでメール設計ができる点が特に便利です。

Discussion