Correos transaccionales con Resend y Supabase

Activa correos transaccionales confiables y escalables: conecta Next.js con Supabase y Resend para avisar en tiempo real cuando un usuario recibe likes o comentarios. Aquí se explica la lógica base, las variables de entorno críticas y el flujo de punta a punta, con validaciones y manejo de errores.

¿Cómo activar correos transaccionales para interacciones en posts?

Configurar notificaciones por email para cada interacción mejora el engagement y mantiene informados a los dueños de los posts. Estos correos son transaccionales, no de marketing: se disparan por acciones reales dentro de la app, como hace Instagram o X.

• Objetivo: detectar un nuevo like o comentario y enviar un email al dueño del post.
• Lógica base: obtener el correo del titular, crear la notificación y enviarla con Recent/Resend.
• Alcance: primeras pruebas desde el front-end y ejecución desde el servidor.

¿Qué eventos disparan el email y qué datos viajan?

• Evento: nuevo comentario o like en un post.
• Datos enviados: ID del dueño, username del dueño, username de quien comenta, cuerpo del comentario y caption del post.
• Validaciones: si falta un campo requerido o no hay “admin” configurado en la librería de email, se responde con error.

¿Cómo se arma el contenido del correo?

• Remitente: “Suplaxigram” desde noresponder@suplaxigram.site.
• Asunto: incluye emoji y el nombre de quien comenta.
• Cuerpo: HTML inline con saludo, cita del comentario y un substring del caption.
• Resultado: un correo claro y directo, personalizable más adelante.

¿Qué configurar: API keys, variables de entorno y librerías?

Antes de enviar correos, necesitas credenciales y dependencias instaladas. Este paso es vital para ejecutar llamadas seguras desde el servidor.

¿Dónde conseguir las API keys y el service role key?

• Resend: en el panel, sección API keys. Crea una nueva clave con nombre recordable o usa una existente.
• Supabase: en Project settings > API keys, pestaña superior. Activa “service role” y copia la variable completa.
• Variables de entorno: agrega la API de Recent/Resend y el service role key de Supabase en tu archivo de entorno.

¿Cómo instalar la librería y validar la versión?

• Instala con npm install Recent.
• Verifica en package.json que Recent esté instalada. Con base en la versión seis todo funciona según lo mostrado.

¿Cómo separar cliente y servidor en Supabase JS?

• client.ts: ahora incluye la service role key para operaciones del lado del servidor.
• Comportamiento: para el cliente usa .supabase expuesta arriba; para servidor usa la “service key”.
• Organización: puedes separarlo en lib/supabase/client.ts y lib/supabase/server.ts. A gusto.

¿Cómo fluye la notificación desde el front-end hasta el email?

El flujo combina un endpoint en Next.js, validación y envío del correo con Recent/Resend. Todo corre en servidor, aprovechando el server-side rendering de Next.js.

¿Qué hace el endpoint en la carpeta API?

• Ruta: carpeta API con endpoint llamado send-comment-email.
• Método: HTTP POST que recibe los campos requeridos (dueño, comentarista, cuerpo, caption).
• Validaciones: si falta algo, responde con error. Maneja errores con logs y status 500.
• Envío: usa funciones de Recent para “email send” pasando from, to, subject y html.

¿Qué cambios hay en page.tsx para disparar el correo?

• Seguridad: si no hay posts, se detiene para evitar acciones inválidas.
• Perfil: obtiene el perfil del usuario que comenta y lo guarda junto con el nuevo comentario.
• Condición: si hay username y no coincide con el usuario actual, hace fetch al endpoint API send comment email con método POST, headers y body necesarios.
• Errores: captura “error enviando email” si el envío falla.

¿Cómo se valida el flujo en navegador y en Resend?

• Vista: al publicar un comentario, llega el email desde noresponder@suplaxigram.site con el texto y estilos definidos en el HTML inline.
• Panel de Resend: en “emails” se ve el último envío con estado enviado y entregado (por ejemplo, a las cuatro y dieciocho), confirmando el circuito completo.

Habilidades y conceptos trabajados - Correos transaccionales: envío basado en eventos reales de la app. - Variables de entorno: manejo de API keys y service role key. - Next.js API routes: creación de endpoint server-side para procesar POST. - Supabase JS: uso diferenciado de cliente y service key. - Validación y manejo de errores: respuestas con status 500 y logs. - HTML inline en emails: plantilla simple y personalizable. - fetch con método POST: envío de headers y body con datos mínimos necesarios.

¿Te gustaría optimizar plantillas, datos enviados o automatizar sin depender del front-end? Cuéntanos tus ideas. Si ya lo implementaste, comparte cómo quedaron tus plantillas y revisa los comentarios para el regalo que ofrece Resend a quienes terminen primero.