VercelにデプロイしているならインテグレーションからResendを追加できる

1 . サブドメインの作成

Cloudflare-DNS-レコードの追加：

タイプ：MX
名前：サブドメイン（例： mail 、 info ）
コンテンツ： @ or xxx.com
- @とすると自動で xxx.com に切り替わる

2 . Resendに登録

https://resend.com/domains

3000通 / 月、1ドメインまで

ドメインを追加：

さきほどのサブドメインを追加： info.xxx.com
オンライン（緑）のリージョンを選択
Cloudflareにリダイレクトされ３つのフィールドが追加される
- ３つのフィールドはResendが自動で作成したことをコメントとして残すと良い

3 . 環境変数

RESEND_API_KEY="xxxxxxxx"
RESEND_FROM="Github Actions 実行通知 <info@mail.xxx.com>"

<> の左側はGmailの各メールで一番目立つ部分（メイン）で日本語が使える。この部分がないとエラーになる。
- <> と左側の日本語を消しメールアドレスだけにするとエラーにはならない。その場合メイン部分には @より手前（ info ）が表示される
*注意： @ より前の部分（今回は info@ ）が無いと、Gmailでフィルターに引っかかる（Gmailに表示されない）
- Postmanではメール送信が成功しているメッセージが出るので、Gmail側のフィルターの可能性が高い
info@ の部分は日本語にするとエラーになる

4 . route.tsの例

route.ts：

import { NextResponse } from "next/server";
import { Resend } from "resend";
import EmailTemplate from "@/app/EmailTemplate";

export async function POST() {
const resend = new Resend(process.env.RESEND_API_KEY);
  try {
    const data = await resend.emails.send({
      from: process.env.RESEND_FROM!,
      to: "xxxxx@gmail.com",
      subject: "✅ Resend ",
      react: EmailTemplate(),
    });

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

表示するのがシンプルなテキストの場合は react の部分をhtml: 'message from resend', のようにする

EmailTemplate.tsx：

import React from "react";

const EmailTemplate = () => {
  return (
    <div>
      <h1 style={{ fontSize: "24px", fontWeight: "bold", color: "green" }}>
        corporis fuga dolorum quidem repudiandae, et odit ab fugit hic error.
      </h1>
      <hr />
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
      </p>
    </div>
  );
};

export default EmailTemplate;

tailwindクラスは反映されないのでstyle属性に書く。CSSファイルはロードされないのでstyle属性で書く
Nextjsの <Image /> コンポーネントを入れるとメール本文が白紙になる
<img />タグを使う時のURLは絶対URLにする

実用的な例

Github Actions

Github Actionsが走ったときにメール通知

route.ts：

import EmailTemplate from "@/app/EmailTemplate";
import { NextRequest, NextResponse } from "next/server";
import { Resend } from "resend";

export async function POST(req: NextRequest) {
  if (req.headers.get("x-api-key") !== process.env.GITHUB_ACTIONS_CRON_KEY) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  try {
    console.log("Cron job running!");
    const resend = new Resend(process.env.RESEND_API_KEY);

    const data = await resend.emails.send({
      from: process.env.RESEND_FROM!,
      to: "xxxxx@gmail.com",
      subject: "✅ Github Actions DONE",
      react: EmailTemplate(),
    });

    return NextResponse.json({ status: "ok", data });
  } catch (error) {
    return NextResponse.json({ status: "ok", error }, { status: 500 });
  }
}

メソッドはPOSTにする

Server Action：form送信の通知

actions.ts：

"use server";
import { Resend } from "resend";

export const sendEmail = async (
  prev: { success: boolean | null; message: string },
  formData: FormData
): Promise<{ success: boolean; message: string }> => {
  try {
    const apiKey = process.env.RESEND_API_KEY!;
    const from = process.env.RESEND_FROM!;

    if (!apiKey) {
      console.error("Missing RESEND_API_KEY");
      return { success: false, message: "Server error." };
    }
    if (!from) {
      console.error("Missing RESEND_FROM");
      return { success: false, message: "Server error." };
    }

    const resend = new Resend(apiKey);

    const data = {
      name: formData.get("name"),
      email: formData.get("email"),
      message: formData.get("message"),
    };

    await resend.emails.send({
      from,
      to: "xxxx@gmail.com", // 自分のEmail
      subject: `${data.name}さんからのメッセージ`,
      html: `
        <p><strong>送信者名：</strong> ${data.name}</p>
        <p><strong>メールアドレス：</strong> ${data.email}</p>
        <p>${data.message}</p>
      `,
    });

    return { success: true, message: "送信が完了しました。" };
  } catch (error) {
    console.error("Contact form error:", error);
    return { success: false, message: "送信中にエラーが発生しました。" };
  }
};

server actionの例

Vercel：Error: Missing API key

build: Error: Missing API key. Pass it to the constructor new Resend("re_123")

1 . turbo.json

対策：

turbo.json に RESEND_API_KEY を追加

  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["$TURBO_DEFAULT$", ".env*"],
      "outputs": [".next/**", "!.next/cache/**"],
      "env": ["RESEND_API_KEY", "RESEND_FROM"]
    },

2 . APIキーの評価

対策：

APIキーを使った初期化処理を関数内に移動する

export const sendEmail = async () => {
  const resend = new Resend(process.env.RESEND_API_KEY);
  
  await resend.emails.send({
    from: process.env.RESEND_FROM!,

Resend：（自分に）Emailを送る

Resend：（自分に）Emailを送る