El Email Transaccional Que Nadie Configura Bien (Y El Stack Que Lo Soluciona De Una Vez)

El momento en que me di cuenta de que estaba haciendo el email transaccional mal fue cuando un usuario me escribió por LinkedIn diciéndome que llevaba tres días sin poder recuperar su contraseña.

Tres días.

Y yo sin saberlo.

No era un problema del servidor. No era un bug en la lógica de autenticación. Era que mi email de reset de contraseña estaba llegando a spam — o directamente no llegaba — porque había montado el sistema de la forma que montan todos: rápido, con `nodemailer`, a las 2AM, sin pensar en la entregabilidad ni en el mantenimiento.

Ese día decidí que nunca más iba a improvisar el email transaccional.

El Problema Real Con El Email En Proyectos Next.js

Mira, el email transaccional es una de esas cosas que todos dejamos para el final. Primero el MVP, luego el onboarding, luego los pagos... y el email "ya lo arreglaré".

El resultado típico es alguna combinación de:

`nodemailer` con SMTP de Gmail que te bloquea en producción
SendGrid con una UI de 2012 y una curva de aprendizaje innecesaria
Templates de HTML en strings de JavaScript (el horror)
API routes que mezclan lógica de negocio con lógica de envío

En 2026, con todo lo que tenemos disponible, esto ya no tiene excusa.

El Stack Ganador: Resend + React Email + Server Actions

Llevo varios proyectos usando esta combinación y es, sin exageración, la primera vez que el email se siente como una parte real de la aplicación y no como un parche.

Cada pieza tiene su razón de ser:

Resend se encarga de la entregabilidad. Tienen autenticación DKIM/SPF configurada por defecto, la API es limpia y el SDK de Node.js es excelente. En España y Europa, además, tienen servidores en la UE, lo que facilita el cumplimiento del RGPD.

React Email te permite construir los templates de email como componentes de React. Nada de strings de HTML. Nada de tablas anidadas a mano. Componentes reales, con props reales, testeables.

Server Actions de Next.js 13+ eliminan la necesidad de crear API routes sólo para enviar un email. La lógica vive donde tiene que vivir: cerca del componente que la necesita.

El Patrón Con Código Real

1. El Template Como Componente React

```tsx // emails/welcome-email.tsx import { Html, Head, Body, Container, Text, Button, Preview, } from '@react-email/components';

interface WelcomeEmailProps { userName: string; confirmationUrl: string; }

export function WelcomeEmail({ userName, confirmationUrl }: WelcomeEmailProps) { return ( <Html> <Head /> <Preview>Confirma tu cuenta en menos de un minuto</Preview> <Body style={{ fontFamily: 'sans-serif', backgroundColor: '#f9fafb' }}> <Container style={{ maxWidth: '560px', margin: '0 auto', padding: '40px 20px' }}> <Text style={{ fontSize: '24px', fontWeight: 'bold' }}> Hola, {userName} 👋 </Text> <Text style={{ color: '#6b7280' }}> Gracias por registrarte. Confirma tu email para empezar: </Text> <Button href={confirmationUrl} style={{ backgroundColor: '#0f172a', color: '#ffffff', padding: '12px 24px', borderRadius: '6px', textDecoration: 'none', }} > Confirmar mi cuenta </Button> </Container> </Body> </Html> ); } ```

Esto es lo que me cambió el chip: el template vive en tu repo, con TypeScript, con props tipadas. Si cambias el nombre de un campo, el compilador te avisa. Ya no hay strings mágicas.

2. La Lógica De Envío Como Server Action

```ts // app/actions/send-welcome-email.ts 'use server';

import { Resend } from 'resend'; import { render } from '@react-email/render'; import { WelcomeEmail } from '@/emails/welcome-email';

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

export async function sendWelcomeEmail({ to, userName, confirmationUrl, }: { to: string; userName: string; confirmationUrl: string; }) { try { const html = render( <WelcomeEmail userName={userName} confirmationUrl={confirmationUrl} /> );

const { data, error } = await resend.emails.send({ from: 'Brian <hola@tudominio.com>', to, subject: 'Confirma tu cuenta', html, });

if (error) { console.error('Error enviando email:', error); return { success: false, error }; }

return { success: true, id: data?.id }; } catch (err) { console.error('Error inesperado:', err); return { success: false, error: err }; } } ```

3. Usarlo Desde Tu Componente O Route Handler

```ts // app/auth/register/route.ts import { sendWelcomeEmail } from '@/app/actions/send-welcome-email';

export async function POST(request: Request) { const { email, name } = await request.json();

// ... lógica de registro ...

const confirmationUrl = `https://tuapp.com/confirm?token=${token}`;

await sendWelcomeEmail({ to: email, userName: name, confirmationUrl, });

return Response.json({ success: true }); } ```

Limpio. Tipado. Predecible.

Lo Que Esto Resuelve Que Los Otros Enfoques No Resuelven

Preview en local: React Email incluye un servidor de previsualizacion. Ejecutas `email dev` y ves exactamente cómo va a quedar el email en el navegador antes de enviar nada. Esto solo ya ahorra horas.

Entregabilidad desde el día uno: Resend gestiona la reputación del dominio, los registros DNS y la autenticación. No tienes que ser experto en SPF, DKIM y DMARC para que tus emails lleguen a la bandeja de entrada.

Mantenibilidad real: Cuando en seis meses necesites cambiar el diseño de todos tus emails, cambias los componentes compartidos. No buscas strings HTML por todo el proyecto.

RGPD y mercado europeo: Resend tiene opciones de almacenamiento en la UE. Si tienes usuarios en España o en cualquier país de la Unión Europea, esto no es opcional — es requisito legal desde el RGPD.

Una Cosa Que Mucha Gente Ignora

El email de bienvenida y el reset de contraseña son los que más se testean. Pero en la mayoría de proyectos, los emails de facturas, notificaciones de actividad o alertas del sistema nunca se prueban de verdad hasta que un cliente se queja.

Con React Email puedes escribir tests unitarios para tus templates. Renderizas el componente con diferentes props y verificas que el contenido es correcto. Lo mismo que harías con cualquier componente de tu UI.

```ts // emails/__tests__/welcome-email.test.tsx import { render } from '@react-email/render'; import { WelcomeEmail } from '../welcome-email';

test('incluye el nombre del usuario', () => { const html = render( <WelcomeEmail userName="Ana García" confirmationUrl="https://test.com/confirm?token=abc" /> );

expect(html).toContain('Ana García'); expect(html).toContain('https://test.com/confirm?token=abc'); }); ```

El Takeaway

El email transaccional es infraestructura crítica. Un usuario que no recibe su email de confirmación es un usuario que no va a convertir. Un usuario que no recibe el reset de contraseña es un usuario que va a abandonar tu app.

En 2026 ya no hay razón para improvisar esto. Resend + React Email + Server Actions es el stack que te da control total, buena entregabilidad y una experiencia de desarrollo que no te hace odiar el email.

Dos pasos concretos para empezar hoy:

1. Instala `resend` y `@react-email/components` en tu proyecto Next.js. La documentación de Resend tiene un quickstart que funciona en menos de diez minutos. 2. Migra primero tu email más crítico — el de confirmación de cuenta o el de reset de contraseña. Una vez veas cómo encaja, el resto viene solo.

Seguimos construyendo.