E-Mails mit React Email versenden

E-Mail-Clients lehnen moderne CSS-Layouts mit Flexbox und Grid ab, sodass Entwickler verschachtelte HTML-Tabellen und Inline-Styles von Hand schreiben müssen. React Email kompiliert JSX-Komponenten zu tabellenbasiertem Markup, das in Gmail, Outlook und Apple Mail einheitlich dargestellt wird.

Wie erstellen Sie ein E-Mail-Template?

Installieren Sie die Pakete:

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

Die Komponenten erzeugen E-Mail-sicheres HTML und übernehmen Inline-Styles und Tabellenlayouts für Sie. Ein einfaches Beleg-Template, das Props akzeptiert, damit Sie es wiederverwenden können:

// 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>
  );
}

Da es reines React ist, setzen Sie Komponenten zusammen, iterieren und übergeben Props wie in jeder anderen Komponente. Anschließend prüfen Sie das Ergebnis lokal in der Vorschau, bevor es versendet wird.

Wie rendern Sie die Komponente zu HTML?

render() nimmt das Element entgegen und gibt einen HTML-String zurück. Die Funktion kann auch eine Nur-Text-Version erzeugen, die Sie als Textalternative mitliefern sollten:

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,
});

An diesem Punkt haben Sie einen HTML-String. Die Aufgabe von React Email ist erledigt. Es wurde noch nichts versendet; dafür brauchen Sie einen Provider.

Versand mit Bird

Übergeben Sie den gerenderten HTML-String direkt an die Bird-E-Mail-API. Die Komponentenausgabe wird zum html-Feld:

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();

Mit dem onboarding@messagebird.dev-Absender und der delivered@messagebird.dev-Sandbox-Adresse prüfen Sie in einem Durchlauf sowohl das gerenderte Template als auch den Versand. Dieselbe render()-Ausgabe funktioniert auch in Vercel Functions oder über SMTP mit Nodemailer.

FAQ

Versendet React Email die E-Mail?

Nein. React Email erstellt das Template und rendert es zu HTML und Nur-Text. Der Versand ist ein separater Schritt, den ein Provider übernimmt, etwa ein SMTP-Server oder eine E-Mail-API.

Warum React Email statt HTML von Hand schreiben?

E-Mail-HTML muss über Clients hinweg funktionieren, die sehr unterschiedliche CSS-Teilmengen unterstützen. Das bedeutet in der Regel verschachtelte Tabellen und Inline-Styles. Die Komponenten von React Email erzeugen dieses Markup für Sie, sodass Sie Komponenten schreiben und E-Mail-sichere Ausgabe erhalten.

Kann ich ein Template mit unterschiedlichen Daten wiederverwenden?

Ja. Templates sind React-Komponenten und nehmen Props entgegen. Rendern Sie dieselbe Komponente mit unterschiedlichen Werten für jeden Empfänger und versenden Sie dann jedes Ergebnis.

React Email und eine API für den Versand teilen die Arbeit sauber auf: Die eine formt die Nachricht, die andere liefert sie aus. Für verwaltetes Templating auf der Versandseite siehe Bird-E-Mail-Templates.