React Email ist eine Templating-Bibliothek, kein Versanddienst. Sie schreiben Ihre E-Mail als React-Komponente mit @react-email/components, rufen render() auf, um daraus einen HTML-String zu erzeugen, und übergeben diesen HTML-String dann an einen beliebigen E-Mail-Provider zum Versand. Die Trennung ist wichtig: React Email kümmert sich um das Markup (und die clientübergreifenden Eigenheiten, die E-Mail-HTML so mühsam machen), während ein separater Provider den Versand übernimmt. So sieht der vollständige Ablauf aus.
Wie erstellen Sie ein E-Mail-Template?
Installieren Sie die Pakete:
npm install @react-email/components @react-email/renderDie 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, können Sie wie in jeder anderen Komponente zusammensetzen, iterieren und Props übergeben – und das Ergebnis lokal in der Vorschau prüfen, 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: "you@yourdomain.com",
to: ["delivered@bird.dev"],
subject: "Your receipt",
html,
}).safe();Die delivered@bird.dev-Sandbox-Adresse nimmt immer E-Mails an, sodass Sie Template und Versand in einem Durchlauf prüfen können. Dieses Muster lässt sich problemlos in eine Serverless-Funktion einbinden, was unter E-Mails auf Vercel versenden beschrieben wird. Wenn Sie lieber über SMTP senden möchten, funktioniert derselbe html-String auch 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.