E-mails versturen met React Email

E-mailclients ondersteunen geen moderne CSS-layouts met flexbox en grid, waardoor developers geneste HTML-tabellen en inline styles met de hand moeten schrijven. React Email compileert JSX-componenten naar markup op basis van tabellen, die consistent wordt weergegeven in Gmail, Outlook en Apple Mail.

Hoe bouw je een e-mailtemplate?

Installeer de pakketten:

npm install @react-email/components @react-email/render

De componenten worden omgezet naar e-mailveilige HTML en regelen inline styles en tabellayouts voor je. Een eenvoudig bontemplate dat props accepteert zodat je het kunt hergebruiken:

// emails/Receipt.tsx
import { Html, Head, Body, Container, Heading, Text } from "@react-email/components";

type ReceiptProps = {
  name: string;
  total: string;
};

export function Receipt({ name, total }: ReceiptProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "sans-serif" }}>
        <Container>
          <Heading>Thanks, {name}</Heading>
          <Text>Your order total was {total}.</Text>
        </Container>
      </Body>
    </Html>
  );
}

Omdat het gewoon React is, kun je componeren, loopen en props doorgeven zoals je bij elk component zou doen, en het lokaal bekijken voordat het daadwerkelijk verstuurd wordt.

Hoe render je het component naar HTML?

render() neemt het element en geeft een HTML-string terug. Het kan ook een platte-tekstversie produceren, die je als tekstalternatief moet meesturen:

import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";

const html = await render(<Receipt name="Alex" total="$42.00" />);
const text = await render(<Receipt name="Alex" total="$42.00" />, {
  plainText: true,
});

Op dit punt heb je een HTML-string. De taak van React Email zit erop. Er is nog niets verstuurd; daar heb je een provider voor nodig.

Versturen met Bird

Geef de gerenderde HTML rechtstreeks door aan de Bird e-mail-API. De uitvoer van het component wordt het html-veld:

import { BirdClient } from "@messagebird/sdk";
import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";

const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });

const html = await render(<Receipt name="Alex" total="$42.00" />);

const { data, error } = await bird.email.send({
  from:    "onboarding@messagebird.dev",
  to:      ["delivered@messagebird.dev"],
  subject: "Your receipt",
  html,
}).safe();

Met de onboarding@messagebird.dev-afzender en het delivered@messagebird.dev-sandboxadres bevestig je zowel het gerenderde template als de verzending in één keer. Dezelfde render()-uitvoer werkt in Vercel functions of via SMTP met Nodemailer.

FAQ

Verstuurt React Email de e-mail?

Nee. Het bouwt het template en rendert het naar HTML en platte tekst. Bezorging is een aparte stap die wordt afgehandeld door een provider, zoals een SMTP-server of een e-mail-API.

Waarom React Email gebruiken in plaats van HTML met de hand schrijven?

E-mail-HTML moet werken in clients die heel verschillende subsets van CSS ondersteunen, wat meestal geneste tabellen en inline styles betekent. De componenten van React Email produceren die markup voor je, zodat je componenten schrijft en e-mailveilige uitvoer krijgt.

Kan ik één template hergebruiken met verschillende data?

Ja. Templates zijn React-componenten en accepteren dus props. Render hetzelfde component met verschillende waarden voor elke ontvanger en verstuur elk resultaat.

React Email en een verzendende API verdelen het werk netjes: de een vormt het bericht, de ander bezorgt het. Zie voor beheerde templating aan de verzendzijde Bird e-mailtemplates.