はじめに
先日、Next.js の勉強会で、メール配信機能の実装について取り上げました 🫐
コンタクトフォーム、通知メールなど、
メール送信機能は、モダンな Web アプリケーションにおいて、利便性を向上させる要素の１つです。
そこで今回は、SendGrid と Resend について調査したので、基礎的な内容をまとめました！
時間の節約になれば、嬉しいです 🙌
SendGrid とは？
最も有名で、利用者の多いメール配信サービスの１つが、SendGrid です。
特徴としては、：
- 2009 年に設立された老舗のサービス
- 世界中の多くの企業や開発者に利用されている、信頼性の高いメール配信 API
クラウドサービスのため、アカウントを作成するだけで即日メールを送信でき、面倒でコストのかかるメールサーバの構築は不要なのも、特徴の一つです 👍
SendGrid の 2025 年 5 月のアップデート
2025 年 5 月 27 日に、SendGrid の無料枠が廃止されました。
それまでは、無料プランでも制限付きで使用することが可能でしたが、
現在は、無料トライアル期間（60 日間）が過ぎると、無料で使用し続けることができなくなりました。
無料で使い続けたい、という方には注意が必要です！
Resend とは？
開発者向けに設計された、次世代のメール配信サービスが、Resend です。。
React や Next.js の開発者に特に人気があり、
シンプルで使いやすい API と、直感的なダッシュボードが特徴です！
Think of it as a next-generation Sendgrid.
Resend は、メール送信のプラットフォームを最新の技術で作り直し、開発者がメール送信をより効率的に行えるようにした、「次世代の SendGrid」だと謳っています。
Resend のプラン
Resend は、当記事執筆時点（2025/07/09）で、無料枠を提供しており、
月間 3,000 通までのメール送信が可能です。
個人開発者や、学習用サービスなどでは、
コストを抑えながら始められる点が、メリットですね。
SendGrid の使い方(Next.js)
それでは、実際に簡単な実装例で、比較してみましょう！
SendGrid を Next.js で使う場合、以下の手順で実装できます。
1. ライブラリのインストール
npm install @sendgrid/mail
2. API キーの設定
環境変数ファイル（.env.local）に API キーを設定：
SENDGRID_API_KEY=your_api_key_here
SENDGRID_FROM_EMAIL=your_email@example.com
3. API ルートの作成
Next.js の、App Router では、API や Server Actions で、メール送信機能を実装できます：
// app/api/send-email/route.ts
import { NextRequest, NextResponse } from "next/server";
import sgMail from "@sendgrid/mail";
sgMail.setApiKey(process.env.SENDGRID_API_KEY!);
export async function POST(req: NextRequest) {
try {
const { to, subject, text } = await req.json();
const msg = {
to,
from: process.env.SENDGRID_FROM_EMAIL!,
subject,
text,
};
await sgMail.send(msg);
return NextResponse.json({ message: "Email sent successfully" });
} catch (error) {
console.error(error);
return NextResponse.json(
{ error: "Failed to send email" },
{ status: 500 }
);
}
}
4. フロントエンドからの利用
const sendEmail = async () => {
const response = await fetch("/api/send-email", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
to: "user@example.com",
subject: "Test Email",
text: "Hello from SendGrid!",
}),
});
};
簡単ですね！
sgMail.send(msg); で、メールの送信ができます！
実際のメール送信処理などは、SendGrid 側がやってくれます 👍
Resend の使い方(Next.js)
Resend も、ほとんど同じように簡単に実装できます！
ただし、Resend は、React Email との親和性が高いことも特徴なので、その方法を確認してみます：
1. ライブラリのインストール
npm install resend
npm install @react-email/components react-email
2. API キーの設定
RESEND_API_KEY=your_api_key_here
RESEND_FROM_EMAIL=your_email@example.com
3. React Email テンプレートの作成
Resend は、React Email と連携することで、React コンポーネントでメールテンプレートを作成できます：
// components/EmailTemplate.tsx
interface EmailTemplateProps {
firstName: string;
}
export const EmailTemplate = ({ firstName }: EmailTemplateProps) => (
<div>
<h1>Welcome, {firstName}!</h1>
<p>Thanks for joining us!</p>
</div>
);
4. API ルートの作成
// app/api/send/route.ts
import { NextRequest, NextResponse } from "next/server";
import { Resend } from "resend";
import { EmailTemplate } from "@/components/EmailTemplate";
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST(req: NextRequest) {
try {
const { firstName, email } = await req.json();
const { data, error } = await resend.emails.send({
from: process.env.RESEND_FROM_EMAIL!,
to: email,
subject: "Welcome!",
react: EmailTemplate({ firstName }),
});
if (error) {
return NextResponse.json({ error }, { status: 400 });
}
return NextResponse.json(data);
} catch (error) {
return NextResponse.json({ error }, { status: 500 });
}
}
Resend は、App Router と Server Actions にも対応しており、より最新の Next.js 開発パターンで利用できます！
メール送信の実装の流れ自体は、SendGrid とほとんど同じですね 😎
SendGrid と Resend の比較まとめ
ここまでで確認した通り、
どちらも比較的簡単にメール送信・一括送信などの機能を、アプリ内に導入することができます！
実務では、
今後も SendGrid が有力な選択肢となるケースが多いと考えます。
信頼性・安定性が高く、そもそも無料枠での導入を考えていないことが多いからですね！
一方、
個人開発者・スタートアップ、もしくは趣味・学習用サービスでは、
Resend のような、シンプルかつ無料で使えるサービスが、嬉しいですね！
どちらも人気のサービスなので、ざっくりでも把握しておくと、柔軟に選択できるかと思います🫠🫠
おわりに
最後まで読んでいただき、ありがとうございます 🥳
ハンズオン形式で、
実際に手を動かして Next.js でのメール送信の実装を学習したい場合は、以下の教材もチェックしてみてください！！
この記事が、少しでも参考になれば嬉しいです！
そして、もし、間違いや補足情報などがありましたら、
ぜひコメントを追加してください！
Happy Hacking :)
参考
Discussion