Cómo enviar correos electrónicos con React Email

Los clientes de correo no admiten los diseños modernos de CSS con flexbox y grid, así que los desarrolladores tienen que escribir a mano tablas HTML anidadas y estilos en línea. React Email compila componentes JSX en markup basado en tablas que se muestra de forma coherente en Gmail, Outlook y Apple Mail.

¿Cómo construyes una plantilla de correo?

Instala los paquetes:

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

Los componentes se traducen a HTML compatible con correo y gestionan los estilos en línea y las disposiciones de tabla por ti. Una plantilla sencilla de recibo, que acepta props para poder reutilizarla:

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

Como es simplemente React, puedes componer, iterar y pasar props como lo harías en cualquier componente, y previsualizarlo en local antes de enviarlo.

¿Cómo conviertes el componente a HTML?

render() recibe el elemento y devuelve una cadena HTML. También puede producir una versión en texto plano, que deberías incluir como alternativa de texto:

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

En este punto tienes una cadena de HTML. El trabajo de React Email ha terminado. Todavía no se ha enviado nada; necesitas un proveedor para eso.

Envíalo con Bird

Pasa el HTML renderizado directamente a la API de correo de Bird. La salida del componente se convierte en el 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();

El remitente onboarding@messagebird.dev y la dirección sandbox delivered@messagebird.dev te permiten comprobar en una sola ejecución tanto la plantilla renderizada como el envío. La misma salida de render() funciona dentro de funciones de Vercel o a través de SMTP con Nodemailer.

Preguntas frecuentes

¿React Email envía el correo?

No. Construye la plantilla y la convierte a HTML y texto plano. La entrega es un paso aparte gestionado por un proveedor, como un servidor SMTP o una API de correo.

¿Por qué usar React Email en lugar de escribir HTML a mano?

El HTML para correo tiene que funcionar en clientes que admiten subconjuntos de CSS muy distintos, lo que normalmente implica tablas anidadas y estilos en línea. Los componentes de React Email generan ese markup por ti, así que escribes componentes y obtienes una salida compatible con correo.

¿Puedo reutilizar una plantilla con datos diferentes?

Sí. Las plantillas son componentes de React, así que aceptan props. Renderiza el mismo componente con valores distintos para cada destinatario y envía cada resultado.

React Email y una API de envío se reparten el trabajo de forma clara: una da forma al mensaje, la otra lo entrega. Para gestionar plantillas del lado del envío, consulta plantillas de correo de Bird.