React Email es una biblioteca de plantillas, no un servicio de envío. Escribes tu correo como un componente de React usando @react-email/components, llamas a render() para convertirlo en una cadena HTML y pasas ese HTML a cualquier proveedor de correo para que lo entregue. La separación importa: React Email se encarga del markup (y de las diferencias entre clientes que hacen del HTML para correo algo complicado), mientras que un proveedor aparte se encarga del envío. Este es el flujo completo.
¿Cómo construyes una plantilla de correo?
Instala los paquetes:
npm install @react-email/components @react-email/renderLos 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 Bird email API. 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: "you@yourdomain.com",
to: ["delivered@bird.dev"],
subject: "Your receipt",
html,
}).safe();La dirección sandbox de delivered@bird.dev siempre acepta correo, así que puedes verificar tanto la plantilla como el envío en una sola ejecución. Este patrón encaja directamente en una función serverless, tema que se cubre en cómo enviar correo en Vercel. Si prefieres enviar a través de SMTP, la misma cadena html funciona 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.