nino
  • ドキュメント
  • レジストリ
  • メンバーシップ

Command Palette

Search for a command to run...

スポンサー
メニュー

Email

 

1分 55秒

  • ローカル開発環境では Mailpit を使います。
  • リモート環境では Resend を使います。

Mailpit のセットアップ

以下のコマンドでMailpitを起動します。以後ローカルで送信されたメールはMailpitで確認できます。Playwrightのテストでも利用できます。

Loading...

メール送信ヘルパーを作成

Loading...
Loading...
Loading...

HTMLメール

React Email を使うと簡単にHTMLメールを作成できます。

Resend のドメインについて

resend.dev ドメインを使えば独自ドメインを接続しなくてもメール送信できます。ただし、 resend.dev ドメインは制限があるためあくまで開発用途で使用し、最終的に本番環境では独自ドメインを使用してください。

また、送信先につても送信失敗扱いになるアドレスが用意されています。

https://resend.dev/

Discord で質問する
何か気になったこと、分からないことがあれば気軽に質問してください!
DiscordDiscordで質問する
nino

Developer

XXGitHubGitHubYouTubeYouTubeZennZennDiscordDiscord

    リンク

  • ドキュメント
  • レジストリ
  • アーキテクチャ

    ツール

  • フィード
  • ステータス

    ポリシー

  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示
ドキュメント
はじめに
  • Changelog
ガイド
  • Webアプリの環境構築
  • ニュース収集&AI要約
  • Turso のテーブル移行
  • 日時の管理
  • 中規模のリストをブラウザにキャッシュし、クライアントでフィルタする
  • Search Params Dialog
  • コードの整理
  • AGENTS.md
  • Better Auth
  • プロダクト開発ポリシー
  • 推奨ツール
  • Proxy.ts
  • 多言語対応
  • SWR
  • Cache Component
  • Next.js の課題、不具合
  • アプリ開発フロー
  • プロンプトガイド
  • CSS Tips
  • Font Family
  • セルフブランディング
  • セルフオンボーディング
  • オフィスツール
  • Email
  • Breadcrumb(パンくず)
  • 並べ替え
brew services start mailpit

# ブラウザで開く
# http://localhost:8025
pnpm add nodemailer @react-email/components resend
pnpm add -D @types/nodemailer
import { render } from "@react-email/components";
import nodemailer from "nodemailer";
import { Resend } from "resend";

const DEFAULT_FROM = "noreply@resend.dev";

type SendEmailProps = {
  from?: string;
  to: string;
  subject: string;
  react?: React.ReactNode;
  text: string;
};

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

const sendResendEmail = async (props: SendEmailProps) => {
  const response = await resend.emails.send({
    ...props,
    from: props.from ?? DEFAULT_FROM,
  });
  return response;
};

const transporter = nodemailer.createTransport({
  host: "localhost",
  port: 1025,
  secure: false,
});

const sendMailpitEmail = async ({ react, ...props }: SendEmailProps) => {
  const info = await transporter.sendMail({
    ...props,
    html: react ? await render(react) : undefined,
    from: props.from ?? DEFAULT_FROM,
  });
  return info;
};

export const sendEmail = async (props: SendEmailProps) => {
  if (process.env.NODE_ENV === "production") {
    return sendResendEmail(props);
  }
  return sendMailpitEmail(props);
};
"use server";

export const deleteUser = async () => {
  // ユーザーを削除する処理...

  await sendEmail({
    to: "test@example.com",
    subject: "ユーザー削除のお知らせ",
    text: "ユーザー削除のお知らせ",
    react: <DeleteUserEmail url="https://example.com" />,
  });
}