Come inviare email con React Email

I client email non supportano i layout CSS moderni con flexbox e grid, quindi gli sviluppatori devono scrivere a mano tabelle HTML annidate e stili inline. React Email compila i componenti JSX in markup basato su tabelle, che viene visualizzato in modo coerente su Gmail, Outlook e Apple Mail.

Come si costruisce un template email?

Installa i pacchetti:

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

I 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:    "onboarding@messagebird.dev",
  to:      ["delivered@messagebird.dev"],
  subject: "Your receipt",
  html,
}).safe();

Il mittente onboarding@messagebird.dev e l'indirizzo sandbox delivered@messagebird.dev permettono di verificare sia il template generato sia l'invio in un'unica esecuzione. Lo stesso output di render() funziona nelle funzioni Vercel o tramite SMTP 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.