Resend API Tutorial: React Email + SDK en 5 Pasos para Dejar de Escribir HTML en Strings

La última vez que enviaste un email transaccional, probablemente escribiste HTML dentro de un string dentro de una función. Eso no es feo. Son horas perdidas cada sprint.

Resend alcanzó 100 millones de emails en su primer año. No porque tuviera mejor entregabilidad que SendGrid o Mailgun — es comparable. Creció porque resolvió el problema que nadie quería tocar: *las plantillas de email apestan, y los incumbentes nunca lo admitieron. *

SendGrid te obliga a crear templates en su dashboard, copiar un ID, y pasarlo por la API. Mailgun te da HTML plano. SES te devuelve XML — *en 2026. *

Resend hizo lo obvio que nadie hizo: trató el email como código. React Email — el framework open-source que co-crearon — tiene más de 15.000 estrellas en GitHub. No es un template engine. Es JSX con type safety, preview local, y testing en CI.

Este tutorial no es teoría. Son 5 pasos para que montéis el pipeline completo hoy.

1. El problema que los incumbentes esconden

El 90% de los equipos que usan SendGrid o SES tienen una carpeta /emails con archivos .html que nadie toca por miedo a romperlos.

❌ El enfoque legacy:

Abres el dashboard de SendGrid
Creas un template con un editor WYSIWYG que mutila tu CSS
Copias el template ID
En producción, pasas variables en un JSON enorme
Si algo se rompe, no hay stack trace

✅ El enfoque Resend:

Escribes un componente React con props tipadas
Lo renderizas a HTML con render() de @react-email/components
Lo envías con una llamada al SDK
Todo pasa por code review y CI

La diferencia no es técnica. Es de workflow. *Cuando el email es código, los cambios pasan por PR, se testean automáticamente, y se rollbackean como cualquier otro cambio. *

Ningún incumbente ofrece eso porque su modelo de negocio depende de mantenerte dentro de su dashboard.

2. El Pipeline de 5 Capas para Email como Código

Este es el framework que uso en todos mis proyectos. Lo llamo El Pipeline de 5 Capas para Email como Código. Cada capa resuelve un problema concreto, y juntas eliminan la fricción de enviar emails transaccionales.

Capa 1: SDK + Verificación de Dominio

Primero, instalad el SDK de Resend y configurad la verificación de dominio.

Código mínimo funcional:

Tres líneas. Sin dashboard. Sin template ID. Sin XML.

Resend maneja DKIM, SPF y DMARC automáticamente cuando verificas el dominio. Añadís los registros DNS que os da la API, y en 10 minutos estáis enviando.

Comparadlo con SendGrid: crear cuenta, configurar sender authentication, crear un template en el dashboard, copiar el ID, llamar a la API con el ID + variables. *Seis pasos contra uno. *

Capa 2: React Email + Componentes

Aquí está el verdadero cambio de paradigma. React Email no es un template engine al uso. Es una librería de componentes JSX que se renderizan a HTML responsive compatible con todos los clientes de correo.

Instalad los componentes base:

Cread vuestro primer componente:

npx react-email dev

import { render } from '@react-email/components';

import { Resend } from 'resend';

import { WelcomeEmail } from '@/emails/welcome';

const resend = new Resend(process.env.RESEND_API_KEY);

const html = render(

<WelcomeEmail

username="Ana"

verificationLink="https://tudominio.com/verificar?token=abc123"

);

await resend.emails.send({

from: 'onboarding@tudominio.com',

to: 'ana@email.com',

subject: 'Bienvenida a la plataforma',

html,

});

import { render } from '@react-email/components';

import nodemailer from 'nodemailer';

import { WelcomeEmail } from '@/emails/welcome';

const html = render(<WelcomeEmail username="Ana" verificationLink="..." />);

const transporter = nodemailer.createTransport({

host: 'smtp.resend.com',

port: 587,

auth: {

user: process.env.RESEND_SMTP_USER,

pass: process.env.RESEND_SMTP_PASS,

});

await transporter.sendMail({

from: 'onboarding@tudominio.com',

to: 'ana@email.com',

subject: 'Bienvenida a la plataforma',

html,

});

---

*El pipeline de componentes no cambia. * Solo cambiáis el transporte. Eso es desacoplamiento real.

Capa 5: Testing Automatizado en CI

Aquí es donde el enfoque de "email como código" gana la partida.

Con templates en dashboard, no hay tests. Confiáis en que el editor WYSIWYG no haya mutilado el diseño. Con React Email, escribís tests como cualquier otro componente:

Añadid un test de snapshot: