Resend Docs

Resend + NextJS: Setup Completo

Resend funciona perfectamente con NextJS porque es una API REST que se ejecuta en el servidor. No necesitas configurar WebSockets, no necesitas un servidor SMTP y no necesitas librerías pesadas. Instalas el SDK, configuras tu API key y empiezas a enviar emails.

Setup Paso a Paso

1. Instalar el SDK

bash
npm install resend

2. Configurar la Variable de Entorno

Agrega tu API key en .env.local:

plaintext
RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxxxxx
Sin prefijo NEXT_PUBLIC_

La API key de Resend debe ser una variable de entorno del servidor, sin el prefijo NEXT_PUBLIC_. Si la expones al cliente, cualquiera puede enviar emails con tu cuenta.

3. Crear el Cliente de Resend

Crea un archivo reutilizable para instanciar el cliente:

typescript
// lib/resend.ts
import { Resend } from 'resend'
 
export const resend = new Resend(process.env.RESEND_API_KEY)

Con esto ya tienes todo listo. Ahora puedes enviar emails desde cualquier parte del servidor.

Opción 1: Route Handler

Un Route Handler es un endpoint HTTP que vive dentro de tu aplicación NextJS. Es útil cuando necesitas una API que otros servicios puedan llamar o cuando quieres recibir webhooks.

typescript
// app/api/send/route.ts
import { resend } from '@/lib/resend'
import { NextResponse } from 'next/server'
 
export async function POST(request: Request) {
  const { to, subject, html } = await request.json()
 
  const { data, error } = await resend.emails.send({
    from: 'Mi App <noreply@midominio.com>',
    to: [to],
    subject,
    html
  })
 
  if (error) {
    return NextResponse.json({ error: error.message }, { status: 400 })
  }
 
  return NextResponse.json({ id: data?.id })
}

Para llamar este endpoint desde un Client Component:

typescript
const response = await fetch('/api/send', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    to: 'usuario@ejemplo.com',
    subject: 'Bienvenido',
    html: '<p>Gracias por registrarte.</p>'
  })
})

Opción 2: Server Action (Recomendado para Formularios)

Las Server Actions son funciones del servidor que puedes llamar directamente desde un formulario o un Client Component sin necesidad de crear un endpoint API. Son la forma recomendada en NextJS 15+ para manejar mutaciones y envíos de formularios.

typescript
'use server'
 
import { resend } from '@/lib/resend'
 
export async function enviarEmailContacto(formData: FormData) {
  const nombre = formData.get('nombre') as string
  const email = formData.get('email') as string
  const mensaje = formData.get('mensaje') as string
 
  const { error } = await resend.emails.send({
    from: 'Contacto <contacto@midominio.com>',
    to: ['tuempresa@gmail.com'],
    replyTo: email,
    subject: `Nuevo mensaje de ${nombre}`,
    html: `<p><strong>${nombre}</strong> (${email}):</p><p>${mensaje}</p>`
  })
 
  if (error) {
    return { success: false, error: 'No se pudo enviar el email' }
  }
 
  return { success: true }
}

Cuándo Usar Cada Opción

Caso de usoSolución recomendada
Formulario de contactoServer Action
Invitación por emailServer Action
Recibir webhooks de otro servicioRoute Handler
API pública para enviar emailsRoute Handler
Email disparado desde un Client ComponentServer Action o Route Handler
Siempre desde el servidor

Nunca envíes emails desde Client Components directamente. Resend requiere tu API key, que debe mantenerse en el servidor. Usa Route Handlers o Server Actions para que el envío ocurra en el servidor y tu API key nunca se exponga al navegador.

Usa replyTo en formularios de contacto

Cuando un usuario te envía un mensaje a través de tu formulario de contacto, configura replyTo con el email del usuario. Así, cuando respondas desde tu bandeja de entrada, el reply va directo a ellos sin que tengas que copiar su dirección manualmente.