React Email is een templatingbibliotheek, geen verzender. Je schrijft je e-mail als een React-component met @react-email/components, roept render() aan om er een HTML-string van te maken en geeft die HTML aan een willekeurige e-mailprovider om te bezorgen. Die scheiding is belangrijk: React Email verzorgt de markup (en de cross-clientproblemen die e-mail-HTML zo lastig maken), terwijl een aparte provider het versturen doet. Hier is de volledige stroom.
Hoe bouw je een e-mailtemplate?
Installeer de pakketten:
npm install @react-email/components @react-email/renderDe 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: "you@yourdomain.com",
to: ["delivered@bird.dev"],
subject: "Your receipt",
html,
}).safe();Het delivered@bird.dev-sandboxadres accepteert altijd e-mail, zodat je zowel het template als de verzending in één keer kunt bevestigen. Dit patroon past naadloos in een serverless function, wat wordt behandeld in e-mail versturen op Vercel. Wil je liever via SMTP versturen, dan werkt dezelfde html-string 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.