Correos con Vercel y Mailtrap

Aprende a integrar Mailtrap con aplicaciones alojadas en Vercel para enviar emails transaccionales con alta entregabilidad y analítica completa, optimizando tus flujos de notificaciones, registro y automatización en proyectos de Next.js.

Este artículo se basa en el tutorial oficial de Mailtrap sobre cómo enviar emails en Vercel disponible en cómo enviar email en Vercel.

Antes de comenzar

Cuentas necesarias

- Cuenta de Vercel para alojar tus aplicaciones y gestionar variables de entorno

- Cuenta de Mailtrap para envío de emails con alta entregabilidad

- Proyecto Next.js para implementar la funcionalidad de envío

Configuración previa

1 Verifica tu dominio de envío Mailtrap permite enviar solo desde dominios verificados Sigue la guía en verificación de dominio

2 Obtén tu token de API Asegúrate de que el token tenga nivel de acceso admin y permisos de envío Visita API tokens de Mailtrap

Paso 1 Configurar Mailtrap

En tu panel de Mailtrap localiza tus credenciales de API

1 Ve a Settings y luego a API Tokens

2 Revisa los tokens activos sus creadores y niveles de acceso

3 Si no tienes token crea uno con Add Token

4 Asigna permisos necesarios habilita permisos API y SMTP

5 Guarda y almacena el token de forma segura

No podrás volver a ver el token completo tras crearlo Para más detalles consulta guía de API Tokens de Mailtrap

Paso 2 Crear una función en Next.js

Crea una ruta de API en tu app Next.js para enviar correos mediante Mailtrap por ejemplo en app api send route.ts

const MAILTRAP_API_TOKEN = process.env.MAILTRAP_API_TOKEN; export async function POST() { const headers = new Headers(); headers.set(`Authorization`, `Bearer ${MAILTRAP_API_TOKEN}`); headers.set(`Content-Type`, `application/json`); const res = await fetch(`https://send.api.mailtrap.io/api/send`, { method: `POST`, headers, body: JSON.stringify({ from: { email: `no-reply@yourdomain.com` }, to: [{ email: `support@yourdomain.com` }], subject: `Hola desde Vercel y Mailtrap`, text: `Este es un correo de prueba enviado con la API de Mailtrap` }) }); if (res.ok) { const data = await res.json(); return Response.json(data); } return Response.json({ error: `No se pudo enviar el correo` }, { status: 500 }); }

Consejo define MAILTRAP_API_TOKEN como variable de entorno y nunca lo expongas en el cliente

Paso 3 Desplegar en Vercel

Añadir tu API key de Mailtrap en Vercel

1 Abre el dashboard de Vercel

2 Entra en Settings del proyecto

3 Ve a Environment Variables

4 Crea una variable con clave MAILTRAP_API_TOKEN y como valor tu token real de Mailtrap

5 Guarda los cambios

Importante las variables de entorno de Vercel se aplican tras un redeploy Haz push de un commit o usa Deploy again

Despliegue

- Integración con Git recomendado conecta tu repo y haz push para desplegar automáticamente

- Vercel CLI instala vercel global y ejecuta vercel --prod

- Desde el dashboard de Vercel importa el proyecto desde Git ajusta la build y despliega

Pruebas de la integración Mailtrap y Vercel

Probar el endpoint de la API

Con la app desplegada ejecuta una petición POST al endpoint de envío

curl -X POST https://tu-proyecto.vercel.app/api/send

Si prefieres desde consola del navegador puedes usar

fetch(`/api/send`, { method: `POST` }).then(r => r.json()).then(console.log)

Verificar la entrega de los emails

1 Revisa tu bandeja de entrada del destinatario configurado

2 Consulta el estado de entrega en Mailtrap Email Logs

3 Supervisa aperturas rebotes y métricas de analítica para optimizar tu estrategia

Cierre

Con estos pasos ya integraste Vercel con Mailtrap Configuraste credenciales de API creaste una ruta de Next.js para enviar correos y desplegaste con variables de entorno en Vercel Ahora puedes enviar emails transaccionales desde un entorno serverless sin gestionar infraestructura compleja

Si deseas profundizar te recomendamos el artículo de Mailtrap sobre Vercel SMTP integration en integración SMTP con Vercel

Sobre Q2BSTUDIO

En Q2BSTUDIO impulsamos a las empresas con aplicaciones a medida y software a medida escalables y seguras combinando arquitectura moderna servicios cloud aws y azure inteligencia artificial ciberseguridad automatización de procesos inteligencia de negocio con power bi y agentes IA para transformar datos en decisiones y procesos en resultados Si estás planificando un producto digital robusto y multicanal descubre cómo podemos ayudarte en desarrollo de aplicaciones y software a medida y potencia tu roadmap de ia para empresas con nuestra oferta de inteligencia artificial

Palabras clave sugeridas para tu estrategia SEO aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio ia para empresas agentes IA power bi