Cómo integrar email transaccional en Next.js

El email transaccional en Next.js es el correo que el producto debe enviar: la copia de un formulario a tu bandeja, un restablecer contraseña, un recibo. No es una newsletter. Mezclar ambos en la misma identidad SMTP es el camino para que Gmail trate tus resets como promociones.

¿Qué es un email transaccional en una app Next.js?

Es un mensaje disparado por una acción del usuario o un evento de sistema, a un destinatario, sin lista de marketing. En el App Router casi siempre es un Route Handler (app/api/.../route.ts) que valida el payload, habla con una API de email y responde 202 o un error que la UI pueda mostrar. La API key del proveedor va en el servidor. Una clave live en el bundle del cliente es un imán de abuso.

MailingCore es una API de email europea para este trabajo: SDK JS o REST, plantillas versionadas, residencia de datos en la UE. El plan Free son 100 emails al mes y 5 plantillas. Puedes llamarla desde una ruta de servidor de Next.js; no pegues una mc_live_ en un Client Component.

Arquitectura mínima

1. Una ruta de servidor que sanea campos, comprueba honeypot y limita por IP.
2. Credenciales en variables de entorno (MAILINGCORE_API_KEY, nunca NEXT_PUBLIC_ para claves live).
3. Un slug de plantilla publicada por tipo de mensaje (contact-form, password-reset).
4. Una clave de idempotencia en reintentos para que un doble clic no envíe dos veces.
5. Logs en el panel — no console.log de la lista completa de destinatarios.

Patrón de formulario de contacto

Valida en el servidor aunque el formulario ya tenga required. Rechaza honeypots que los bots rellenan. Luego envía con plantilla para que el copy se edite sin un deploy:

• POST /api/contact recibe nombre, email, mensaje.
• La ruta llama a MailingCore.sendTemplate({ slug: "contact-inbox", to: process.env.CONTACT_INBOX, data }).
• Opcionalmente un segundo envío de confirmación al visitante.

Si el visitante debe recibir copia, trátalo como un segundo transaccional, no como BCC del ticket interno. El BCC es cómo se filtran direcciones ajenas en un hilo.

Resets y recibos

Usa un dominio From dedicado con SPF, DKIM y DMARC alineados. Desactiva tracking de apertura y clic en correo de seguridad: el píxel y los enlaces reescritos parecen bulk. MailingCore documenta trackingDisabled por envío por ese motivo.

Guarda tokens hasheados. Expíralos. No registres la URL completa de reset.

GDPR para equipos Next.js en la UE

Si tus usuarios están en la UE, el proveedor de email es un encargado de tratamiento. Una región de envío en Irlanda no implica por sí sola que logs y plantillas vivan en la Unión. Prefiere un vendor que declare almacenamiento en la UE — o acepta SCC y documéntalas. MailingCore almacena en Europa; la región EU de Resend es lugar de envío con datos de cuenta en EE. UU. según su política pública. Verifica la documentación vigente antes de decírselo a un DPO.

Siguiente paso

Primero la ruta de contacto. Autentica el dominio antes de tráfico de producción. Luego plantillas de auth y billing. Sigue el inicio rápido y MailingCore vs Resend si la residencia de datos decide el proveedor.