Correos transaccionales con Resend y Supabase

Los correos transaccionales aumentan la retención y la confianza. Aquí verás cómo activar notificaciones por comentario en un post usando Resend, Next.js y Supabase, desde la obtención de claves hasta el flujo completo de envío y verificación, sin añadir dependencias innecesarias ni pasos confusos.

¿Cómo configurar Resend y variables de entorno para correos transaccionales?

Para enviar emails cuando alguien comenta o hace like, primero se guardan dos variables de entorno críticas: la API Key de Resend y la Service Role Key de Supabase. Estas credenciales habilitan operaciones seguras desde el servidor y el envío fiable de correos transaccionales (no marketing), disparados por acciones reales en la app.

¿Dónde conseguir y guardar las API keys?

• En el panel de Resend: entra a API keys. Crea una nueva clave, ponle un nombre útil y guárdala en el archivo de variables de entorno.
• La clave de Supabase: en Project settings → API keys → segundo tab, activa el service role y copia la variable completa a tu archivo de entorno.
• Usa nombres claros para recordar su propósito. Asegura el archivo fuera del control de versiones.

¿Cómo instalar Resend en el proyecto?

• Ejecuta: npm install resend.
• Verifica en package.json que aparece la dependencia con una versión base 6.x.
• Mantén actualizada la librería, pero la serie 6 es suficiente para continuar.

¿Qué ruta de API en Next.js envía el email de comentario?

Se crea una carpeta API y una ruta (por ejemplo, send comment email) en Next.js para procesar un HTTP request en método POST. El endpoint recibe datos del comentario, valida campos y dispara el correo al dueño del post con la API de Resend.

¿Qué datos valida el endpoint y cómo maneja errores?

• ID del dueño del post y su username.
• Username de quien comenta y cuerpo del comentario.
• Caption del post para mostrar un extracto.
• Verificación de un admin configurado en la librería interna.
• Si falta un campo: responde con error descriptivo.
• Si ocurre algo inesperado: maneja errores y devuelve status 500.

¿Cómo compone el email con Resend?

• Llama a resend.emails.send con un objeto de configuración.
• From: “Suplatsigram” usando noresponder@suplatsigram.site.
• To: el email del dueño del post.
• Subject: incluye un emoji y el nombre del usuario que comenta.
• HTML inline: mensaje con saludo, autor del comentario y el texto del comentario en estilo tipo blockquote. Incluye un substring del caption del post.
• Todo corre desde el servidor gracias al server-side rendering de Next.js.

¿Qué cambios en Supabase client y en la página integran el flujo?

Se actualiza el archivo client.ts para distinguir entre operaciones del cliente y del servidor. Además, desde la página principal (page.tsx), al guardar un comentario se hace un fetch en POST al endpoint para enviar el email solo cuando aplica.

¿Qué cambio clave en client.ts habilita el server-side?

• Se añade la lectura y validación de la service role key como serviceKey.
• Esa clave se usa exclusivamente en operaciones del lado del servidor.
• El cliente público sigue usando la instancia expuesta para el navegador.
• Puede separarse en archivos distintos (client y server), pero también funciona en el mismo archivo.

¿Cómo dispara page.tsx el envío del email?

• Controla que existan posts antes de permitir comentar.
• Obtiene el perfil del usuario que comenta y lo adjunta a la data del comentario.
• Si el username del autor del post existe y no coincide con el usuario actual, ejecuta fetch en POST a la ruta /api/send-comment-email.
• Envía headers y body con los campos esperados por el endpoint.
• Si algo falla: muestra “error enviando email”.

¿Cómo verificar el envío en Resend y en la bandeja?

• En el navegador: al publicar el comentario, llega automáticamente un correo al dueño del post desde noresponder@suplatsigram.site.
• En Resend: en la sección Emails, aparece el registro con estado Enviado/Entregado y el asunto con el texto del comentario.
• El diseño se define por el HTML inline usado en el envío y puede mejorarse luego con plantillas.

Te leo en los comentarios: ¿cómo optimizarías la información del correo, qué mejoras harías al diseño del HTML y cómo automatizarías las notificaciones sin depender del front end?