En los últimos tres años desarrollando aplicaciones, he tenido la oportunidad de trabajar con diversas tecnologías, entre ellas Resend, una plataforma que ha transformado la manera en que gestionamos y enviamos correos electrónicos a los usuarios.
¿Qué es Resend?
Resend es una plataforma que permite enviar correos electrónicos a los usuarios a través de una API. Es una herramienta muy útil para desarrolladores que necesitan enviar correos electrónicos a sus usuarios de manera rápida y eficiente. Puedes consultar la guía oficial en: https://resend.com/docs/dashboard/domains/introduction
Funcionalidades y características
- API simple para enviar emails: El núcleo de Resend es su API para enviar correos desde tu aplicación. Integras Resend con tu backend y ya puedes enviar emails desde él.
- Emails creados con componentes (por ejemplo, React): En lugar de escribir HTML de email a mano, defines estructuras reutilizables y más fáciles de mantener. Esto hace que diseñar y actualizar tus emails sea mucho más cómodo.
- Dominios personalizados y buena entregabilidad: Para que tus emails lleguen correctamente, Resend permite conectar tu propio dominio de envío. Así tus correos salen desde direcciones como hola@tuapp.com en lugar de un dominio genérico.
- Logs y eventos de los emails enviados: La herramienta incluye un panel donde puedes ver qué está pasando con cada correo que envía tu producto, si se entregó, rebotó, se abrió o tuvo problemas.
- Integraciones con stacks modernos: Resend encaja bien con stacks como Next.js, Remix, NestJS, etc. La idea es que puedas integrarlo sin cambiar tu forma de desarrollar ni tu flujo de trabajo. Si estás construyendo productos web modernos, añadir Resend es rápido.
Diseño Moderno de Emails con React Email
Escribir tablas HTML anidadas para asegurar compatibilidad entre clientes de correo es una pesadilla del pasado. Utilizando React Email (disponible en NPM como @react-email/components), podemos diseñar plantillas elegantes y responsivas usando componentes de React reutilizables.
import { Html, Button, Text, Container, Heading } from '@react-email/components';
import * as React from 'react';
export default function WelcomeEmail({ name }: { name: string }) {
return (
<Html lang="es">
<Container style={{ padding: '24px', fontFamily: 'sans-serif', backgroundColor: '#f9f9f9', borderRadius: '12px' }}>
<Heading style={{ color: '#4f46e5', fontSize: '24px', marginBottom: '16px' }}>
¡Bienvenido, {name}!
</Heading>
<Text style={{ fontSize: '16px', color: '#333', lineHeight: '1.6', marginBottom: '24px' }}>
Nos complace enormemente tenerte a bordo. Haz clic en el botón de abajo para activar y configurar tu cuenta de desarrollador.
</Text>
<Button
href="https://tuportafolio.dev/activar"
style={{ background: '#4f46e5', color: '#ffffff', padding: '12px 24px', borderRadius: '8px', textDecoration: 'none', fontWeight: 'bold' }}
>
Comenzar Configuración
</Button>
</Container>
</Html>
);
}Para enviar esta plantilla a través de Resend, tenemos dos alternativas sumamente potentes que demuestran el vínculo y la integración directa entre ambas tecnologías:
Método 1: Compilación Manual (HTML Render)
Si requieres el HTML compilado para otros fines o configuraciones de servidor personalizadas, puedes importar la utilidad render de @react-email/components para convertir el componente React a un string HTML antes del envío.
import { Resend } from 'resend';
import { render } from '@react-email/components';
import WelcomeEmail from './emails/WelcomeEmail';
import React from 'react';
const resend = new Resend(process.env.RESEND_API_KEY);
export async function sendReactEmailWithRender(email: string, name: string) {
try {
// 1. Compilar manualmente el componente React a string HTML
const emailHtml = await render(React.createElement(WelcomeEmail, { name }));
// 2. Transmitir el HTML puro a la API de Resend
const response = await resend.emails.send({
from: 'Jean Piguave <contacto@tuportafolio.dev>',
to: [email],
subject: '¡Activación de cuenta exitosa!',
html: emailHtml
});
return { success: true, id: response.data?.id };
} catch (error) {
console.error('Error compilando con render:', error);
return { success: false, error };
}
}Método 2: Sinergia e Integración Nativa (Recomendada)
Dado que Resend y React Email son desarrollados por el mismo equipo bajo una misma filosofía, la SDK oficial de Resend ofrece un vínculo de primera clase. Puedes omitir la compilación manual y pasar tu componente de React directamente al parámetro react de la API de Resend. La SDK se encargará de renderizar y enviar todo automáticamente.
import { Resend } from 'resend';
import WelcomeEmail from './emails/WelcomeEmail';
import React from 'react';
const resend = new Resend(process.env.RESEND_API_KEY);
export async function sendNativeReactEmail(email: string, name: string) {
try {
// Pasamos el componente de React directamente a través del atributo 'react'
const response = await resend.emails.send({
from: 'Jean Piguave <contacto@tuportafolio.dev>',
to: [email],
subject: '¡Enviado de forma nativa con React Email + Resend!',
react: React.createElement(WelcomeEmail, { name })
});
return { success: true, id: response.data?.id };
} catch (error) {
console.error('Error con el vínculo nativo:', error);
return { success: false, error };
}
}Casos de Uso Reales: Mi Experiencia en Producción con Factuplan
En mi trayectoria profesional, he confiado plenamente en Resend para gestionar las notificaciones transaccionales críticas de proyectos a gran escala como Factuplan. En este SaaS contable y de facturación, elegimos e implementamos con éxito Resend para cubrir flujos de comunicación vitales como: el envío de correos de bienvenida a nuevos suscriptores, notificaciones de pagos exitosos procesados de manera segura, actualizaciones del estado de facturas del SRI en tiempo real, reportes automatizados con estadísticas de venta semanales, y alertas preventivas indicando que pronto expira su suscripción al servicio. Para resolver todas estas necesidades operativas con un rendimiento excepcional, Resend ha sido y sigue siendo nuestra opción definitiva.
⚠️ DATO CURIOSO Y LECCIÓN DE SEGURIDAD: Durante nuestras pruebas en el entorno de desarrollo, por error dejamos configuradas las credenciales de producción. Estábamos testeando flujos de la API para validar la lógica y, sin querer, disparamos el envío masivo de más de 5,000 correos de prueba a cuentas ficticias (como example@gmail.com, example1@gmail.com, etc.). Debido a las estrictas políticas anti-spam, Resend no solo bloqueó la clave API, sino que suspendió por completo la cuenta temporalmente. Afortunadamente, pudimos ponernos en contacto con soporte técnico, explicar lo sucedido y nos rehabilitaron la cuenta ese mismo día. Nos dejó una gran lección: si estás creando usuarios de prueba, no debes enviar correos reales; esto lo puedes controlar de manera profesional y segura a través de variables de entorno del sistema (ENV).
