【Resend】Next.jsのお問い合わせ革命？Resendを少し触ってみた

こんにちわ、hanetsukiです。記事を書くのは5億年ぶりですね。
私は日頃よりJamstackを推進しているのですが、いつもいつもお問い合わせ系フォームに悩まされています。

近年はまさにSaaS大航海時代、自前も含めて選択肢は様々です。
HyperForm、getform、Formspree、EmailJS、SendGrid、nodemailer、AWS SES...etc
時と場合によっていろんなものを触る日々です。

そんな中最近知ったサービス、Resendを触ってみたいと思います。

（TOPがかっこいいですね。惚れてしまいます。）
https://resend.com/

この記事は、ResendのNext.js Quickstartをベースに進めていきます。
https://resend.com/docs/send-with-nextjs

今回Next.jsの環境構築の工程を省きます。
Next.jsの環境は、下記のリポジトリを利用しました。
https://github.com/tsuki-lab/nextjs-latest-starter

今回進めるにあたり試したリポジトリを残してあります。
参考になれば幸いです。🙇
https://github.com/tsuki-lab/email-api-resend-trial

開発を進める前に

Next.js Quickstartには、進める上での前提条件として、API keyの作成とドメインの確認が必要なようです。

まずは、アカウントの登録を実施しましょう

メールアドレス認証かGitHub認証、好きな方を選んでください！
https://resend.com/signup

次に、API Keyの作成を実施しましょう

1. ログインした状態で、https://resend.com/api-keys に遷移します。

2. Create API Keyを押下して、情報を入力します。
   
   今回は動けばいいので、PermissionはSending accessに、DomainはAll domainsにします。
   

3. API Keyが発行されるので控えておきます。
   

次のドメインの確認についてなのですが、今回はスキップします

ドメインを設定することで独自ドメインでメールを送ることができるようになります。
今回は、動けばいいのでResendが用意してくれている@resend.devをそのまま使います。

さぁ、準備が整いました！
早速、Resendを使っていきます。

環境変数の登録

事前に作成しておいたNext.js環境に環境変数を登録します。

.env.local

RESEND_API_KEY=<控えておいたAPI Key>

Resend SDKをインストール

ResendのNode.js SDKを追加します。

yarn add resend

Emailのテンプレートを作成

Resendでは、Emailのhtml本文をjsx(tsx)で作成することができます。

components/EmailTemplate.tsx

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate = ({ firstName }: EmailTemplateProps) => (
  <div>
    <h1>Welcome, {firstName}!</h1>
  </div>
);

メール送信APIの作成

Resend SDKを用いてメールを送信するロジックを記載します。
今回は、App RouterのAPI作成に習って作成を進めます。

app/api/send/route.ts

import { 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 GET() {
  try {
    const data = await resend.sendEmail({
      from: '[e-mail]',
      to: '<自分が受け取ることができるメールアドレス>',
      subject: 'Hello world',
      react: EmailTemplate({ firstName: 'John' }),
    });

    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error });
  }
}

動作確認

ここまでできたら、ローカルサーバーを立ち上げてhttp://localhost:3000/api/send へアクセスしてみましょう！

上手く動作すれば、画面には{"id":"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"}が表示されて、APIに設定しておいたメールアドレス宛にメールが送られてきているはずです。

実際の組み込みでは、「GETリクエストではなく、POSTリクエストに変更したり」「入力画面→入力内容確認画面を通してお問い合わせしてくれた人に自動返信メールを飛ばすようにしたり」するなど、様々な対応が追加で求められると思います。

実装については以上です！

金額について

気になる利用金額について軽く触れておきましょう。

https://resend.com/pricing
Resendでは、Free・Pro・Enterpriseのプランが存在します。

Freeプランで毎月100通メールを送信できるというのですからだいぶありがたいですね。
Proプランは従量課金制となっているようで利用数で変動するようです。

プラン	何通送れるか	金額	データの保持期間
Free	最大100通/月	$0	1日
Pro	~50,000通/月	$20	3日
Pro	~100,000通/月	$35	3日
Pro	~150,000通/月	$50	3日

利用規約を軽く読んでみた感じ、合法的な目的であれば問題なく利用できそうです。
https://resend.com/legal/terms-of-service

これらの情報2023/06/07時点のものです。

おわりに

私がResendに特に魅力を感じている部分の一つとしては、SDKを通してjsxでメールのテンプレートが記載できることでしょうか。
画面はjsxで作っても、メールの本文はテンプレートリテラルで長ったらしく記述する...なんてことも今まではありました。

他に良かった点としては、

• htmlメールが簡単に書ける。
• メール本文内にサービス名が記載されることがない.
• 無料プランでも規模によっては十分に使える。
• SDKの種類が豊富

といったところでしょうか？

これを気に、Resendに入門してみてはいかがでしょうか？
それではこれにて