Tutorial de Next.js + Resend: Configuración y pruebas de correo electrónico

Hola, ¡aquí Hoda Hoda!

Hace poco creé un sistema de autenticación usando Next.js + Resend. Esto sirve en parte como recordatorio para mi yo del futuro, así que he recopilado aquí cómo lo configuré.

¿Qué es Resend?

En resumen, Resend es "an email-sending API built for developers." En comparación con los servicios tradicionales de envío de correos, está diseñado para que a los desarrolladores les resulte mucho más sencillo añadir funciones de correo electrónico a aplicaciones modernas (aplicaciones web, aplicaciones móviles, etcétera).

Resend es compatible con una amplia gama de lenguajes y frameworks, por lo que puedes empezar a utilizarlo de inmediato en entornos como:

• JavaScript/TypeScript: Node.js, Next.js, React, Express y más.
• Otros lenguajes: Python, PHP (Laravel), Ruby (Rails), Go, Rust, Elixir, Java, .NET y más.

Qué puedes hacer con Resend

Resend no es solo para enviar correos; incluye características realmente útiles para el desarrollo.

• Visibilidad y gestión: Puedes consultar el estado detallado de cada correo que hayas enviado (enviado, abierto, clicado, rebotado, etc.) directamente desde el panel de control.
• Gestión de la entregabilidad del dominio: Autentica tu propio dominio para que tus correos lleguen de forma fiable a la bandeja de entrada del destinatario.
• Plantillas basadas en React: Puedes construir el HTML de tu correo utilizando componentes de React, lo que encaja perfectamente con los desarrolladores frontend.
• Compartir en equipo: Puedes compartir el contenido de un correo enviado con tus compañeros de equipo mediante un enlace público que se puede ver sin autenticación durante 48 horas.

Los pasos básicos para empezar

Este es el flujo general para añadir Resend a un proyecto.

1. Prerrequisitos

Primero, crea una cuenta en el sitio oficial y ocúpate de dos cosas:

• Crear una clave API: Genera una clave de autenticación para que tu aplicación pueda llamar a Resend.
• Verificar un dominio: Configura todo lo necesario para poder enviar correos desde un dominio de tu propiedad.

2. Instalar el SDK

Para un entorno Node.js, por ejemplo, instala el SDK con:

npm install resend

3. La implementación básica

El envío más sencillo posible (para algo como Next.js) tiene este aspecto. Configura tu clave API como una variable de entorno y simplemente llama al método resend.emails.send.

import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

await resend.emails.send({
  from: 'you@yourdomain.com',
  to: 'recipient@example.com',
  subject: 'Hello World',
  html: '<p>This is my first email from Resend!</p>'
});

Un consejo sobre “envíos de prueba” que conviene conocer desde el principio

Si envías correos de forma repetida a direcciones reales durante el desarrollo, la reputación de tu dominio puede verse afectada, lo que aumenta el riesgo de que tus correos sean marcados como spam más adelante.

Para evitarlo, Resend ofrece direcciones de prueba dedicadas que te permiten simular diferentes escenarios sin dañar la reputación de tu dominio.

• Probar un envío exitoso: envíe a delivered@resend.dev.
• Probar un rebote: envíe a bounced@resend.dev.
• Probar ser marcado como spam: envíe a complained@resend.dev.

El uso de estas opciones te permite desarrollar de forma segura sin contaminar tu entorno de producción.

Si tuviera que describir Resend en una sola imagen, sería como un mostrador de envíos internacionales inteligente. No necesitas conocer los procedimientos antiguos y complicados (configurar un servidor de correo por tu cuenta); simplemente entregas la dirección y el mensaje, y Resend se encarga de enviarlo de forma fiable, a la vez que te indica en tiempo real exactamente dónde está tu paquete.

Añadir Resend a un proyecto de Next.js

1. Prerrequisitos

Antes de empezar a implementar nada, ocúpate de dos cosas en el panel de control de Resend:

• Crear una clave API: obtén la clave que tu aplicación utilizará para autenticarse.
• Verificar un dominio: registra y verifica el dominio desde el que realizarás los envíos.

Por cierto, incluso el plan gratuito te permite enviar 3000 correos electrónicos transaccionales al mes, por lo que es más que suficiente para un proyecto pequeño.

2. Instalar el SDK

Primero, ejecuta el siguiente comando en el directorio raíz de tu proyecto para instalar el SDK de Resend para Node.js:

npm install resend

3. Crear una plantilla de correo electrónico

Lo que hace que Resend destaque es que puedes utilizar componentes de React directamente como plantillas de correo. Por ejemplo, crea un archivo llamado components/email-template.tsx con algo como esto:

import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Welcome, {firstName}!</h1>
  </div>
);

4. Implementar la lógica de envío (Ruta de API)

A continuación, crea un punto de conexión (endpoint) de API para enviar el correo. Si estás usando el App Router, créalo en app/api/send/route.ts (para el Pages Router, utiliza pages/api/send.ts).

Aquí inicializamos Resend utilizando la variable de entorno RESEND_API_KEY y enviamos un correo electrónico utilizando la plantilla que acabamos de crear.

import { EmailTemplate } from '../../../components/EmailTemplate';
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
  try {
    const { data, error } = await resend.emails.send({
      from: 'Acme <onboarding@resend.dev>', // your verified domain
      to: ['delivered@resend.dev'],       // recipient
      subject: 'Hello world',
      react: EmailTemplate({ firstName: 'John' }), // using the React template
    });

    if (error) {
      return Response.json({ error }, { status: 500 });
    }

    return Response.json(data);
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

5. Comprobar el estado del envío y realizar pruebas

Puedes verificar en detalle el resultado de un correo enviado desde Next.js directamente desde el panel de control de Resend.

• Rastrear eventos de correo: sigue el registro para ver si un correo enviado fue “enviado”, “entregado” o “rebotado” (rechazado por el servidor del destinatario).
• Utilizar las direcciones de prueba: durante el desarrollo, es una buena idea comprobar el comportamiento utilizando las direcciones de prueba que se indican a continuación en lugar de tu propia dirección de correo electrónico.
  • Prueba de éxito: envía a delivered@resend.dev para ver cómo se comporta ante una entrega exitosa.
  • Prueba de rebote: envía a bounced@resend.dev para probar cómo reacciona tu gestión de errores.

Si tuviera que describir esta configuración en Next.js, es como poner en marcha una línea de entrega dedicada en la parte trasera de tu tienda.

Escribes la carta utilizando una herramienta que ya conoces bien (componentes de React) y la introduces en la línea de entrega dedicada de Resend (el SDK/API). A partir de ahí, se entrega automáticamente a cualquier parte del mundo y obtienes un recibo en tiempo real que confirma que ha llegado de forma segura. Ese es el tipo de sistema fluido que acabas consiguiendo.