How to Send React Email Templates with Mailofly

import { Mailofly } from "@mailofly/node";
import { render } from "@react-email/render";
import { WelcomeEmail } from "@/emails/welcome";
import { NextResponse } from "next/server";

const mailofly = new Mailofly({
  apiKey: process.env.MAILOFLY_API_KEY!,
});

export async function POST(request: Request) {
  try {
    const { email, name } = await request.json();

    // 1. Render React Email component to static HTML
    const emailHtml = await render(
      WelcomeEmail({ name, loginUrl: "https://yourdomain.com/login" })
    );

    // 2. Dispatch via Mailofly REST API
    const data = await mailofly.emails.send({
      from: "Acme App <notifications@yourdomain.com>",
      to: [email],
      subject: `Welcome to Acme, ${name}!`,
      html: emailHtml,
      tags: [{ name: "template", value: "welcome-react" }],
    });

    return NextResponse.json({ success: true, messageId: data.id });
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}