React Email è una libreria di templating, non un servizio di invio. Scrivi la tua email come componente React usando @react-email/components, chiami render() per trasformarla in una stringa HTML, poi passi quell'HTML a un qualsiasi provider email per la consegna. La separazione è importante: React Email gestisce il markup (e le incompatibilità tra client che rendono l'HTML per email così problematico), mentre un provider separato si occupa dell'invio. Ecco il flusso completo.
Come si costruisce un template email?
Installa i pacchetti:
npm install @react-email/components @react-email/renderI componenti corrispondono a HTML compatibile con i client email e gestiscono al posto tuo stili inline e layout a tabelle. Un semplice template per una ricevuta, che accetta props per poterlo riutilizzare:
// 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>
);
}Essendo semplice React, puoi comporre, iterare e passare props come in qualsiasi altro componente, e visualizzare l'anteprima in locale prima di inviare.
Come si converte il componente in HTML?
render() prende l'elemento e restituisce una stringa HTML. Può anche produrre una versione in testo semplice, da includere come alternativa testuale:
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,
});A questo punto hai una stringa HTML. Il lavoro di React Email è finito. Non è stato ancora inviato nulla: per quello serve un provider.
Inviare con Bird
Passa l'HTML generato direttamente nell'Bird email API. L'output del componente diventa il campo html:
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();L'indirizzo sandbox di delivered@bird.dev accetta sempre la posta, quindi puoi verificare sia il template sia l'invio in un'unica esecuzione. Questo pattern si integra facilmente in una funzione serverless, come spiegato in come inviare email su Vercel. Se preferisci inviare tramite SMTP, la stessa stringa html funziona con Nodemailer.
FAQ
React Email invia l'email?
No. Costruisce il template e lo converte in HTML e testo semplice. La consegna è un passaggio separato gestito da un provider come un server SMTP o un API email.
Perché usare React Email invece di scrivere HTML a mano?
L'HTML per email deve funzionare su client che supportano sottoinsiemi di CSS molto diversi tra loro, il che di solito significa tabelle annidate e stili inline. I componenti di React Email producono quel markup al posto tuo: scrivi componenti e ottieni output compatibile con i client email.
Posso riutilizzare un template con dati diversi?
Sì. I template sono componenti React, quindi accettano props. Renderizza lo stesso componente con valori diversi per ogni destinatario, poi invia ciascun risultato.
React Email e un API di invio si dividono il lavoro in modo netto: uno compone il messaggio, l'altro lo consegna. Per il templating gestito lato invio, vedi template email Bird.