Tu SaaS necesita enviar correos antes de tener un solo cliente: confirmar registros, recuperar contraseñas, mandar recibos de pago. Son los emails transaccionales, y si caen en spam pierdes usuarios en el primer minuto. Este tutorial te enseña a enviarlos bien en Next.js con Resend y React Email — con código real, dominio verificado y los errores que mandan tus correos directos a la carpeta de no deseados.
✦ Lo que vas a montar
Un sistema de envío en el App Router de Next.js: plantillas escritas en componentes de React, dominio autenticado para no caer en spam, y un Route Handler que envía desde el servidor sin exponer tu API key. Listo para producción.
Índice
Qué es un email transaccional
Un email transaccional es un correo automático disparado por una acción del usuario: se registra y recibe el de confirmación, olvida la contraseña y recibe el de recuperación, paga y recibe el recibo. Es uno-a-uno y esperado — lo contrario del email de marketing, que es masivo y promocional.
Esta diferencia importa para la entregabilidad: el usuario espera el transaccional, así que conviene que llegue rápido y al inbox, no a promociones. Mezclar ambos tipos por el mismo canal arruina tu reputación de envío.
Por qué Resend y no SMTP
La forma clásica es SMTP con Nodemailer. Funciona, pero te deja gestionando a mano la parte difícil: reputación de IP, reintentos y entregabilidad. Una API moderna como Resend se encarga de eso por ti y se integra con React Email.
| SMTP + Nodemailer | Resend (API) |
|---|---|
| Gestionas la entregabilidad tú | La gestiona el proveedor |
| Plantillas en HTML a mano | Plantillas en componentes React |
| Reintentos y logs manuales | Dashboard, logs y webhooks |
| Config de credenciales SMTP | Una API key y listo |
Para un indie hacker que quiere lanzar rápido, Resend gana: plan gratis generoso, integración nativa con Next.js y la entregabilidad resuelta. Si vienes de comparar herramientas, esta es la misma lógica de LemonSqueezy vs Stripe: delega la parte difícil.
Instalación y API key
Crea una cuenta en Resend, genera una API key y guárdala en variables de entorno — nunca en el código. Instala las dependencias:
npm install resend @react-email/componentsEn tu .env.local:
RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxx✦ Seguridad
La API key da poder de enviar correos en tu nombre. Va siempre en el servidor (Route Handler o Server Action), nunca en componentes de cliente ni en variables con prefijo NEXT_PUBLIC_. Si la expones, cualquiera puede mandar spam con tu dominio.
Verificar el dominio (SPF, DKIM, DMARC)
Este es el paso que casi todos saltan y por eso acaban en spam. Enviar desde tuapp@gmail.com no sirve: los servidores de correo no confían en quien no demuestra ser dueño del dominio. Para demostrarlo, añade tu dominio en Resend y configura tres registros en tu DNS:
- SPF: declara qué servidores pueden enviar correo en nombre de tu dominio.
- DKIM: firma criptográficamente cada email para que el receptor verifique que no se manipuló.
- DMARC: le dice al receptor qué hacer si un correo falla SPF o DKIM. Sube la entregabilidad y protege tu marca.
Resend te da los valores exactos al añadir el dominio; los pegas en tu proveedor de DNS (Cloudflare, el registrador, etc.). Tarda de minutos a unas horas en propagar. Sin esto, da igual lo bonito que sea el email: caerá en spam.
Plantillas con React Email
Los clientes de correo (Gmail, Outlook, Apple Mail) renderizan HTML de los años 90: tablas, estilos en línea, cero CSS moderno. Escribir eso a mano es un infierno. React Email te deja escribir componentes y genera el HTML compatible por ti:
// emails/bienvenida.tsx
import { Html, Button, Text, Container } from '@react-email/components';
export default function Bienvenida({ nombre }: { nombre: string }) {
return (
<Html lang="es">
<Container>
<Text>Hola {nombre}, gracias por registrarte.</Text>
<Button href="https://tuapp.com/empezar">
Empezar
</Button>
</Container>
</Html>
);
}Componentes reutilizables, props con TypeScript, vista previa en local. Mantienes los emails como mantienes el resto de tu UI.
Auth, pagos y emails, ya montados.
IndiePack trae el envío de correos transaccionales configurado de fábrica — junto a auth y pagos. Tú escribes el contenido, no el setup.
Ver IndiePack — 250€ →Enviar desde un Route Handler
El envío va siempre en el servidor. Un Route Handler en el App Router recibe la petición y llama a Resend con la plantilla:
// app/api/enviar/route.ts
import { Resend } from 'resend';
import Bienvenida from '@/emails/bienvenida';
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST(req: Request) {
const { email, nombre } = await req.json();
const { data, error } = await resend.emails.send({
from: 'IndiePack <hola@tudominio.com>',
to: email,
subject: 'Bienvenido a bordo',
react: Bienvenida({ nombre }),
});
if (error) {
return Response.json({ error }, { status: 500 });
}
return Response.json({ id: data?.id });
}El campo from usa tu dominio verificado — ahí se cierra el círculo con el paso anterior. Para flujos críticos (tras un pago, por ejemplo), dispara el envío desde el webhook correspondiente, no desde el cliente, para que no dependa de que el navegador siga abierto.
Por qué caes en spam (y cómo evitarlo)
- Dominio sin autenticar: la causa nº1. SPF, DKIM y DMARC no son opcionales.
- Enviar desde dominio gratuito:
@gmail.comcomo remitente es bandera roja. Usa tu dominio. - Mezclar marketing y transaccional: una campaña masiva quema la reputación que tus correos críticos necesitan. Sepáralos.
- Contenido sospechoso: exceso de mayúsculas, «GRATIS!!!», enlaces acortados. Escribe como una persona.
- Sin texto plano: manda siempre versión HTML y texto. React Email lo facilita.
- Dominio nuevo sin reputación: empieza con volumen bajo y deja que la reputación crezca («calentar» el dominio).
El 90% de los emails en spam no es por el contenido: es por un dominio que nunca se autenticó.
Preguntas frecuentes
¿Resend tiene plan gratuito?
Sí, con un límite mensual de envíos suficiente para arrancar un SaaS y validar. Cuando creces, pagas por volumen. Ideal para empezar sin coste.
¿Puedo usar React Email con otros proveedores?
Sí. React Email solo genera el HTML; puedes enviarlo con Resend, SMTP u otro proveedor. Pero la integración con Resend es la más directa.
¿Server Action o Route Handler para enviar?
Las dos valen mientras sea servidor. Route Handler si necesitas un endpoint (p. ej. para webhooks); Server Action si lo llamas desde un formulario de tu propia app.
Conclusión
Enviar emails transaccionales en Next.js es sencillo cuando ordenas los pasos: usa Resend para delegar la entregabilidad, verifica el dominio con SPF, DKIM y DMARC (el paso que decide si llegas o no), escribe las plantillas con React Email y envía siempre desde el servidor. Haz eso y tus correos llegan al inbox, no a spam.
Si prefieres saltarte el setup, IndiePack ya trae el envío de emails configurado junto con la autenticación y los pagos, para que pases del registro al recibo sin tocar DNS a las tres de la mañana.
Deja de pelearte con el setup.
Emails, auth y pagos listos de fábrica en castellano. Pago único, sin suscripción.
Conseguir IndiePack — 250€ →