El correo electrónico es un componente crítico de las aplicaciones web modernas, utilizado para todo, desde la incorporación de usuarios y notificaciones hasta restablecimientos de contraseña y campañas de marketing. Sin embargo, construir y gestionar una infraestructura de envío de correo electrónico fiable puede ser complejo y llevar mucho tiempo. Aquí es donde entran los servicios de API de correo electrónico como Resend.
Resend ofrece una plataforma amigable para desarrolladores diseñada para simplificar el proceso de envío de correos electrónicos transaccionales y de marketing. Proporciona APIs robustas, análisis detallados y una excelente entregabilidad, lo que permite a los desarrolladores centrarse en construir sus aplicaciones en lugar de preocuparse por la infraestructura de correo electrónico.
Esta guía completa te llevará a través de todo lo que necesitas saber para empezar con la API de Resend, desde la comprensión de sus conceptos principales y precios hasta su integración con varios frameworks y plataformas populares.
¿Quieres una plataforma integrada, todo en uno, para que tu equipo de desarrolladores trabaje con máxima productividad?
¡Apidog cumple todas tus demandas y reemplaza a Postman a un precio mucho más asequible!
¿Qué es Resend?
Resend es una plataforma de API de correo electrónico construida para desarrolladores. Su objetivo es proporcionar una experiencia de desarrollador superior en comparación con los proveedores de servicios de correo electrónico (ESPs) más antiguos. Las características clave incluyen:
- API moderna: Una API limpia y RESTful que es fácil de integrar en cualquier aplicación.
- Alta entregabilidad: Se centra en asegurar que tus correos electrónicos lleguen a la bandeja de entrada, no a la carpeta de spam, a través de características como verificación de dominio personalizado (DKIM, SPF, DMARC), IPs dedicadas (como complemento) y gestión automática de listas de supresión.
- Integraciones con Frameworks: Ofrece SDKs oficiales y guías para frameworks populares como Node.js, Next.js, Python, Ruby, PHP, Go y más.
- Integración con React Email: Se integra sin problemas con React Email, permitiéndote construir plantillas de correo electrónico hermosas y responsivas usando componentes de React.
- Webhooks: Proporciona notificaciones en tiempo real sobre eventos de correo electrónico como entrega, rebotes, aperturas, clics y quejas de spam.
- Análisis detallados: Ofrece información sobre el rendimiento del correo electrónico a través de un panel de control fácil de usar.
- Enfoque en el desarrollador: Diseñado pensando en los desarrolladores, ofreciendo documentación clara, SDKs útiles y herramientas como correos electrónicos de prueba para facilitar el desarrollo y la depuración.
Resend se posiciona como una alternativa más moderna y centrada en el desarrollador a jugadores establecidos como SendGrid, Mailgun o AWS SES, centrándose en la facilidad de uso, la fiabilidad y la buena integración con los flujos de trabajo de desarrollo web modernos.
¿Cuál es el precio de Resend?
Resend ofrece una estructura de precios por niveles basada en el número de correos electrónicos enviados por mes, con consideraciones separadas para correos electrónicos transaccionales y de marketing (aunque la página de precios detalla principalmente los planes transaccionales).
Aquí tienes un desglose de sus planes de correo electrónico transaccional (a partir de la fecha de redacción):
Plan Gratuito:
- Costo: $0 / mes
- Correos electrónicos: Hasta 3.000 correos electrónicos por mes
- Límite diario: 100 correos electrónicos por día
- Dominios: 1 dominio personalizado
- Retención de datos: 1 día
- Soporte: Soporte por ticket
- Características clave: API RESTful, Relé SMTP, SDKs, Seguimiento de aperturas/enlaces, Integración con React Email, Lista de supresión automática, Autenticación DKIM/SPF/DMARC, 1 Endpoint de Webhook.
- Limitaciones: No hay Inicio de Sesión Único (SSO), No hay IPs dedicadas, Dominios y envío diario limitados.
Plan Pro:
- Costo: $20 / mes
- Correos electrónicos: Hasta 50.000 correos electrónicos por mes (con cargos adicionales por exceso a partir de este límite)
- Límite diario: Sin límite diario
- Dominios: 10 dominios personalizados
- Retención de datos: 3 días
- Soporte: Soporte por ticket
- Características clave: Todas las características del plan Gratuito, además de SSO, 10 Endpoints de Webhook.
- Limitaciones: No incluye IPs dedicadas (disponibles como complemento más adelante), No hay soporte por Slack.
Plan Scale:
- Costo: $90 / mes
- Correos electrónicos: Hasta 100.000 correos electrónicos por mes (con cargos adicionales por exceso)
- Límite diario: Sin límite diario
- Dominios: 1.000 dominios personalizados
- Retención de datos: 7 días
- Soporte: Soporte por Slack y Ticket
- Características clave: Todas las características del plan Pro, además de IP dedicada disponible como complemento ($30/mes, requiere >500 correos electrónicos/día).
- Limitaciones: Las IPs dedicadas son un complemento.
Plan Enterprise:
- Costo: Precio personalizado
- Correos electrónicos: Volumen personalizado
- Límite diario: Sin límite diario
- Dominios: Flexible
- Retención de datos: Flexible
- Soporte: Soporte prioritario, SLA de respuesta urgente, Experiencia en entregabilidad
- Características clave: Todas las características del plan Scale, además de Calentamiento de IP dedicada, Información sobre entregabilidad, Webhooks flexibles, SSO incluido.
Consideraciones clave:
- Exceso: Enviar más correos electrónicos de los permitidos por tu plan incurrirá en costos adicionales por correo electrónico.
- IPs dedicadas: Disponibles como complemento para los planes Scale y Enterprise por una tarifa mensual adicional, recomendadas para remitentes de alto volumen preocupados por la reputación de la IP compartida.
- Retención de datos: La duración durante la cual Resend almacena registros y detalles sobre tus correos electrónicos enviados varía según el plan.
- Correos electrónicos de marketing: La página de precios tiene un interruptor para correos electrónicos de marketing, lo que sugiere que podrían aplicarse diferentes planes o estructuras de precios, pero los detalles se centraron en los correos electrónicos transaccionales en el contenido extraído. Consulta el sitio web de Resend para conocer los precios más actuales de los correos electrónicos de marketing.
El plan Gratuito es lo suficientemente generoso para proyectos pequeños o propósitos de prueba. Los planes Pro y Scale se adaptan a aplicaciones en crecimiento con volúmenes de correo electrónico y requisitos de características crecientes. El plan Enterprise proporciona soluciones personalizadas para operaciones a gran escala.
Cómo empezar con Resend
Antes de poder enviar correos electrónicos, debes configurar tu cuenta de Resend y configurar tu dominio de envío.
1. Registrarse y crear una clave API
- Ve al sitio web de Resend y regístrate para obtener una cuenta.
- Navega a la sección API Keys en tu panel de control de Resend (https://resend.com/api-keys).
- Haz clic en Create API Key.
- Dale a tu clave API un nombre descriptivo (por ejemplo,
my-app-key). - Elige el nivel de permisos:
- Acceso completo: Permite todas las acciones de la API (crear, eliminar, obtener, actualizar recursos). Úsalo con precaución, normalmente solo es necesario para tareas de gestión de backend.
- Acceso de envío: Solo permite enviar correos electrónicos. Este es el permiso recomendado para la lógica de envío de tu aplicación. Puedes restringir opcionalmente esta clave para enviar solo desde un dominio verificado específico.
- Haz clic en Create.
- Importante: Resend te mostrará la clave API solo una vez. Cópiala inmediatamente y almacénala de forma segura (por ejemplo, en una variable de entorno, gestor de secretos). No la incluyas directamente en tu código base.
2. Verificar tu dominio
Para enviar correos electrónicos que parezcan profesionales y evitar los filtros de spam, debes verificar un dominio de tu propiedad. Enviar desde dominios no verificados o direcciones predeterminadas como onboarding@resend.dev solo es adecuado para pruebas iniciales.
- Ve a la sección Domains en tu panel de control de Resend (https://resend.com/domains).
- Haz clic en Add Domain e introduce el dominio desde el que deseas enviar correos electrónicos (por ejemplo,
yourcompany.com). - Elige tu proveedor de DNS de la lista o selecciona 'Other'.
- Resend te proporcionará registros DNS (generalmente MX, TXT para SPF y CNAME/TXT para DKIM) que necesitas añadir a la configuración DNS de tu dominio.
- SPF (Sender Policy Framework): Especifica qué servidores de correo están autorizados a enviar correo electrónico en nombre de tu dominio.
- DKIM (DomainKeys Identified Mail): Añade una firma digital a los correos electrónicos, permitiendo a los servidores receptores verificar que el correo electrónico no ha sido manipulado y que se originó en un servidor autorizado.
- Inicia sesión en tu registrador de dominio o proveedor de DNS (por ejemplo, GoDaddy, Cloudflare, Namecheap) y añade los registros proporcionados por Resend.
- Los cambios de DNS pueden tardar algún tiempo en propagarse (minutos a horas, a veces hasta 48 horas).
- Una vez añadidos los registros, vuelve al panel de control de Dominios de Resend y haz clic en el botón Verify junto a tu dominio. Resend verificará si los registros DNS están configurados correctamente. Una vez verificado, el estado se actualizará y podrás empezar a enviar correos electrónicos desde direcciones asociadas a ese dominio (por ejemplo,
support@yourcompany.com,noreply@yourcompany.com).
3. Envío de correos electrónicos de prueba
Durante el desarrollo, es crucial probar el envío de correos electrónicos sin afectar la reputación de tu dominio o enviar accidentalmente a usuarios reales. Resend proporciona direcciones de correo electrónico especiales para probar diferentes escenarios:
- Prueba de entrega: Envía a
delivered@resend.dev. Esto simula un correo electrónico entregado con éxito. - Prueba de rebote: Envía a
bounced@resend.dev. Esto simula un rebote duro (por ejemplo, la dirección del destinatario no existe), activando un evento de rebote. - Prueba de marcado como spam: Envía a
complained@resend.dev. Esto simula que un destinatario marca tu correo electrónico como spam, activando un evento de queja.
El uso de estas direcciones de prueba te permite verificar tu integración y probar manejadores de webhook para eventos de rebote y queja de forma segura.
Integrando Resend con Frameworks
Resend proporciona SDKs oficiales y métodos de integración sencillos para varios lenguajes y frameworks. Cubriremos algunos ejemplos populares basados en la documentación proporcionada. El concepto principal generalmente implica:
- Instalar el SDK de Resend (si está disponible) o usar solicitudes HTTP estándar.
- Inicializar el cliente de Resend con tu clave API (cargada de forma segura, generalmente desde variables de entorno).
- Llamar al método
emails.send(o equivalente) con parámetros comofrom,to,subject, yhtmloreact.
Envío con Next.js
Next.js es un framework popular de React. Resend se integra bien, especialmente con React Email.
1. Instalar:
npm install resend
# or
yarn add resend
# or
pnpm add resend
2. Crear plantilla de correo electrónico (Opcional pero recomendado):Usa React Email o crea un componente simple de React para el cuerpo de tu correo electrónico.
// components/email-template.tsx
import * as React from 'react';
interface EmailTemplateProps {
firstName: string;
}
export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
firstName,
}) => (
<div>
<h1>Welcome, {firstName}!</h1>
</div>
);
3. Crear ruta de API:Crea un manejador de ruta de API para enviar el correo electrónico.
- App Router:
app/api/send/route.ts - Pages Router:
pages/api/send.ts
// app/api/send/route.ts (App Router Example)
import { EmailTemplate } from '../../../components/email-template'; // Adjust path if needed
import { Resend } from 'resend';
// Ensure RESEND_API_KEY is set in your .env.local
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST() {
try {
const { data, error } = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>', // Use your verified domain
to: ['delivered@resend.dev'], // Replace with recipient or test address
subject: 'Hello from Resend and Next.js!',
react: EmailTemplate({ firstName: 'Test' }), // Pass props to your template
// Alternatively, use `html`:
// html: '<strong>It works!</strong>'
});
if (error) {
return Response.json({ error }, { status: 400 });
}
return Response.json(data);
} catch (error) {
return Response.json({ error }, { status: 500 });
}
}
// pages/api/send.ts (Pages Router Example - adapt imports/response)
// import type { NextApiRequest, NextApiResponse } from 'next';
// import { EmailTemplate } from '../../components/EmailTemplate';
// import { Resend } from 'resend';
//
// const resend = new Resend(process.env.RESEND_API_KEY);
//
// export default async (req: NextApiRequest, res: NextApiResponse) => {
// try { // Added try...catch for better error handling
// const { data, error } = await resend.emails.send({
// from: 'Your Name <you@yourverifieddomain.com>',
// to: ['delivered@resend.dev'],
// subject: 'Hello world',
// react: EmailTemplate({ firstName: 'John' }),
// });
//
// if (error) {
// return res.status(400).json(error);
// }
//
// res.status(200).json(data);
// } catch (e) {
// res.status(500).json({ error: 'Internal Server Error' });
// }
// };
4. Disparador:Llama a este endpoint de API desde tu frontend (por ejemplo, después de enviar un formulario) usando fetch o una librería como axios. Recuerda reemplazar los valores de marcador de posición con tu dominio verificado real y las listas de destinatarios.
Envío con Astro
Astro es un constructor de sitios estáticos moderno que también soporta renderizado del lado del servidor (SSR).
1. Instalar Resend:
npm install resend
# or
yarn add resend
# or
pnpm add resend
2. Instalar Adaptador SSR:Astro necesita un adaptador SSR para ejecutar código del lado del servidor bajo demanda. Instala uno adecuado para tu objetivo de despliegue (por ejemplo, @astrojs/node, @astrojs/vercel, @astrojs/cloudflare).
npx astro add node # Ejemplo para adaptador de Node.js
Sigue las instrucciones de configuración del adaptador en tu astro.config.mjs.
3. Añadir clave API:Almacena tu RESEND_API_KEY en tu archivo .env.
4. Crear Astro Action:Usa Astro Actions (característica experimental a la fecha de redacción, consulta la documentación de Astro para conocer el estado actual) o endpoints de API estándar.
// src/actions/index.ts (Usando Astro Actions)
import { ActionError, defineAction, z } from 'astro:actions';
import { Resend } from 'resend';
// Asegúrate de que RESEND_API_KEY esté disponible a través de import.meta.env
const resend = new Resend(import.meta.env.RESEND_API_KEY);
export const server = {
send: defineAction({
// Ejemplo: Define validación de entrada si es necesario
// input: z.object({ email: z.string().email() }),
handler: async (/* { email } - if using input */) => {
try { // Se añadió try...catch
const { data, error } = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'], // Replace with recipient
subject: 'Hello from Resend and Astro!',
html: '<strong>Astro works!</strong>',
// También puedes usar plantillas de React si configuraste React en Astro
// react: <YourAstroCompatibleReactEmail firstName="Astro" />
});
if (error) {
console.error("Resend Error:", error); // Registrar error
// Lanzar ActionError ayuda a Astro a manejar errores de forma elegante
throw new ActionError({
code: 'BAD_REQUEST', // O sé más específico según el error
message: error.message || 'Failed to send email',
});
}
return data; // Devolver datos de éxito
} catch (e) {
console.error("Handler Error:", e);
// Relanzar o lanzar un nuevo ActionError
throw new ActionError({
code: 'INTERNAL_SERVER_ERROR',
message: 'An unexpected error occurred.',
});
}
},
}),
};
// Alternative: API Endpoint (e.g., src/pages/api/send.ts)
// import type { APIRoute } from 'astro';
// import { Resend } from 'resend';
//
// const resend = new Resend(import.meta.env.RESEND_API_KEY);
//
// export const POST: APIRoute = async ({ request }) => {
// // const body = await request.json(); // Si los datos provienen del cuerpo de la solicitud
// try {
// const { data, error } = await resend.emails.send({ /* ... email params ... */ });
// if (error) {
// return new Response(JSON.stringify(error), { status: 400 });
// }
// return new Response(JSON.stringify(data), { status: 200 });
// } catch (e) {
// return new Response(JSON.stringify({ message: "Server Error"}), { status: 500 });
// }
// }
5. Disparador:Llama a la acción o al endpoint desde tus componentes o páginas de Astro, típicamente dentro de un manejador de envío de formulario.
Envío con Bun
Bun es un tiempo de ejecución de JavaScript rápido con un bundler, transpiler, task runner y cliente npm integrados.
1. Instalar:
bun install resend
2. Crear plantilla de correo electrónico (Opcional):Similar a Next.js, puedes crear un archivo .tsx para tu plantilla de correo electrónico de React.
// email-template.tsx
import * as React from 'react';
interface EmailTemplateProps {
firstName: string;
}
export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
firstName,
}) => (
<div>
<h1>Welcome, {firstName}!</h1>
</div>
);
3. Crear script de servidor Bun:Crea un script (por ejemplo, index.tsx) para ejecutar un servidor HTTP simple usando Bun.
// index.tsx
import { Resend } from 'resend';
import { EmailTemplate } from './email-template'; // Asumiendo que está en el mismo directorio
// Cargar clave API desde variables de entorno
const resendApiKey = process.env.RESEND_API_KEY;
if (!resendApiKey) {
console.error("Error: RESEND_API_KEY environment variable not set.");
process.exit(1); // Salir si falta la clave
}
const resend = new Resend(resendApiKey);
const server = Bun.serve({
port: 3000,
async fetch(req) { // Se añadió el argumento 'req'
// Opcional: Verificar método de solicitud, ruta, etc.
// if (new URL(req.url).pathname !== '/send') {
// return new Response("Not Found", { status: 404 });
// }
// if (req.method !== 'POST') {
// return new Response("Method Not Allowed", { status: 405 });
// }
try {
const { data, error } = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'],
subject: 'Hello from Resend and Bun!',
react: EmailTemplate({ firstName: 'Bun User' }),
// O usa html: '<strong>¡Bun funciona!</strong>'
});
if (error) {
console.error("Resend Error:", error);
// Devolver una respuesta de error JSON adecuada
return new Response(JSON.stringify({ error: error.message || 'Failed to send email' }), {
status: 500, // O 400 dependiendo del tipo de error
headers: { 'Content-Type': 'application/json' },
});
}
// Devolver respuesta de éxito
return new Response(JSON.stringify(data), {
status: 200,
headers: { 'Content-Type': 'application/json' },
});
} catch (e) {
console.error("Server Error:", e);
return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
status: 500,
headers: { 'Content-Type': 'application/json' },
});
}
},
error(error) { // Se añadió un manejador de errores básico para el propio servidor
return new Response(`<pre>${error}\\\\\\\\n${error.stack}</pre>`, {
headers: { "Content-Type": "text/html" },
});
},
});
console.log(`Listening on <http://localhost>:${server.port} ...`);
4. Ejecutar:Inicia el servidor usando RESEND_API_KEY=your_api_key bun run index.tsx. Acceder a http://localhost:3000 (o activar la ruta/método específico que definiste) enviará el correo electrónico.
Envío con Nuxt
Nuxt es un framework popular de Vue.js.
1. Instalar:
npm install resend
# or
yarn add resend
# or
pnpm add resend
2. Crear ruta de servidor:Nuxt utiliza un directorio server/ para la lógica de backend. Crea un archivo como server/api/send.post.ts (el .post indica que maneja solicitudes POST).
// server/api/send.post.ts
import { Resend } from 'resend';
// Acceder a la clave API de forma segura (por ejemplo, a través de runtimeConfig en nuxt.config.ts)
// Ver: <https://nuxt.com/docs/guide/going-further/runtime-config>
const config = useRuntimeConfig();
const resend = new Resend(config.resendApiKey); // Asumiendo que la clave está configurada en runtime config
export default defineEventHandler(async (event) => {
// Opcional: Leer el cuerpo si los datos provienen de la solicitud
// const body = await readBody(event);
try {
const data = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'],
subject: 'Hello from Resend and Nuxt!',
html: '<strong>Nuxt works!</strong>',
// Puedes integrar plantillas de correo electrónico de Vue (por ejemplo, usando vue-email)
// Ver: <https://github.com/Dave136/vue-email>
});
// Nuxt 3 maneja automáticamente la devolución de datos como JSON
return data;
} catch (error: any) { // Capturar tipos de error específicos si es posible
console.error("Resend Error:", error); // Registrar error
// Lanzar un error que Nuxt pueda manejar, estableciendo el código de estado
throw createError({
statusCode: 400, // O 500
statusMessage: 'Failed to send email',
data: error // Opcionalmente incluir detalles del error
});
}
});
// En tu nuxt.config.ts, define runtimeConfig:
// export default defineNuxtConfig({
// runtimeConfig: {
// resendApiKey: process.env.NUXT_RESEND_API_KEY, // Solo en el lado del servidor
// public: {
// // Claves públicas accesibles en el lado del cliente
// }
// }
// })
// Y establece NUXT_RESEND_API_KEY en tu .env
3. Disparador:Llama al endpoint /api/send (usando el método POST) desde tus páginas o componentes de Nuxt usando $fetch o useFetch.
Envío con Vercel Functions
Vercel Functions son funciones serverless que se integran sin problemas con Next.js o se pueden usar de forma independiente. El ejemplo de Next.js anterior ya demuestra su uso en un entorno Vercel. Si usas Vercel Functions sin Next.js (por ejemplo, con un generador de sitios estáticos u otro framework desplegado en Vercel), el enfoque es similar:
1. Crear función:Crea un archivo en el directorio api/ de tu proyecto (por ejemplo, api/send.ts).
// api/send.ts (Ejemplo para función estándar de Vercel)
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { Resend } from 'resend'; // Puede que necesites instalar resend
// Asegúrate de que RESEND_API_KEY esté configurada como una variable de entorno de Vercel
const resendApiKey = process.env.RESEND_API_KEY;
if (!resendApiKey) {
console.error("RESEND_API_KEY is not set");
// No continuar si la clave falta en producción
}
const resend = new Resend(resendApiKey);
export default async function handler(
request: VercelRequest,
response: VercelResponse,
) {
// Recomendado: Verificar el método POST
if (request.method !== 'POST') {
return response.status(405).json({ message: 'Method Not Allowed' });
}
try {
const { data, error } = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'],
subject: 'Hello from Resend & Vercel Functions!',
html: '<strong>It works on Vercel!</strong>',
// Las plantillas de React se pueden usar si tu función incluye React
});
if (error) {
console.error('Resend Error:', error);
return response.status(400).json(error);
}
return response.status(200).json(data);
} catch (e) {
console.error('Handler Error:', e);
return response.status(500).json({ message: 'Internal Server Error' });
}
}
2. Configurar variable de entorno:Añade tu RESEND_API_KEY como una variable de entorno en la configuración de tu proyecto Vercel.
3. Desplegar:Despliega tu proyecto usando la CLI de Vercel (vercel) o integración Git.
4. Disparador:Realiza una solicitud POST a la URL de la función desplegada (por ejemplo, https://your-project.vercel.app/api/send).
Envío con Supabase Edge Functions
Supabase Edge Functions se ejecutan en Deno Deploy, cerca de tus usuarios. Usan Deno y APIs Web estándar como fetch. Resend aún no tiene un SDK oficial para Deno, por lo que usas fetch directamente.
1. Crear función Supabase:Usa la CLI de Supabase:
supabase functions new resend-email-sender # Elige un nombre
cd supabase/functions/resend-email-sender
2. Editar manejador:Modifica el archivo index.ts generado.
// supabase/functions/resend-email-sender/index.ts
import { serve } from "<https://deno.land/std@0.177.0/http/server.ts>"; // Usa la versión std apropiada
// Acceder a la clave API de forma segura a través de variables de entorno de Supabase Edge Function
const RESEND_API_KEY = Deno.env.get('RESEND_API_KEY');
// Manejador de solicitud básico
const handler = async (_request: Request): Promise<Response> => {
if (!RESEND_API_KEY) {
console.error("RESEND_API_KEY environment variable not set.");
return new Response(JSON.stringify({ error: "Server configuration error" }), {
status: 500, headers: { 'Content-Type': 'application/json' }
});
}
// Opcional: Verificar método de _request, encabezados o cuerpo si es necesario
try {
const res = await fetch('<https://api.resend.com/emails>', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${RESEND_API_KEY}` // Usa la clave aquí
},
body: JSON.stringify({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'], // Reemplazar destinatario
subject: 'Hello from Resend & Supabase Edge!',
html: '<strong>It works! Edge Functions are cool.</strong>',
// Nota: Enviar componentes de React directamente no es factible aquí
// sin un paso de construcción en la edge function para renderizarlos a HTML.
// Envía HTML pre-renderizado o texto plano.
})
});
// Manejar posibles respuestas no-OK de la API de Resend
if (!res.ok) {
const errorData = await res.json().catch(() => ({ message: 'Failed to parse Resend error response' })); // Error al analizar la respuesta de error de Resend
console.error("Resend API Error:", res.status, errorData); // Registrar error
return new Response(JSON.stringify({ error: 'Failed to send email via Resend', details: errorData }), {
status: res.status, // Reenviar el código de estado de Resend
headers: { 'Content-Type': 'application/json' },
});
}
// Analizar respuesta exitosa
const data = await res.json();
// Devolver respuesta de éxito
return new Response(JSON.stringify(data), {
status: 200,
headers: { 'Content-Type': 'application/json' },
});
} catch (error) {
console.error("Edge Function Error:", error); // Error de Edge Function:
return new Response(JSON.stringify({ error: 'Internal Server Error in Edge Function' }), {
status: 500,
headers: { 'Content-Type': 'application/json' },
});
}
};
// Iniciar el servidor
serve(handler);
console.log("Supabase Edge Function 'resend-email-sender' is running..."); // Supabase Edge Function 'resend-email-sender' se está ejecutando...
3. Establecer variable de entorno:Establece la RESEND_API_KEY localmente usando supabase secrets set RESEND_API_KEY your_actual_key y también configúrala en la configuración de Funciones de tu proyecto Supabase para el despliegue.
4. Desplegar e Invocar:
# Probar localmente (opcional)
supabase functions serve resend-email-sender --no-verify-jwt
# Desplegar
supabase functions deploy resend-email-sender --no-verify-jwt
Invoca la función usando su URL, típicamente a través de una llamada a una librería cliente de Supabase desde tu frontend u otro servicio backend.
Envío con Cloudflare Workers
Cloudflare Workers son funciones serverless que se ejecutan en la red de borde de Cloudflare. El SDK de Node.js de Resend a menudo puede funcionar en entornos Workers con empaquetado apropiado.
1. Configurar proyecto Worker:Inicializa un proyecto Worker, a menudo usando npm create cloudflare. Asegúrate de que esté configurado para módulos y empaquetado (por ejemplo, usando Wrangler con Webpack o esbuild).
2. Instalar Resend:
npm install resend
# o yarn/pnpm
3. Crear plantilla de correo electrónico (Opcional):Si usas React, crea tu archivo de plantilla (.tsx).
4. Editar script Worker:Modifica tu archivo Worker principal (por ejemplo, src/index.ts o src/index.tsx si usas React).
// src/index.tsx (Ejemplo usando React)
import { Resend } from 'resend';
// Asumiendo que tienes un componente de plantilla de React
import { EmailTemplate } from './emails/email-template'; // Ajustar ruta
// Definir las variables de entorno esperadas para seguridad de tipos
export interface Env {
RESEND_API_KEY: string;
}
export default {
async fetch(
request: Request,
env: Env, // Acceder a variables de entorno a través de 'env'
ctx: ExecutionContext
): Promise<Response> {
// Instanciar Resend usando la clave API de las variables de entorno
const resend = new Resend(env.RESEND_API_KEY);
// Opcional: Verificar método de solicitud, ruta URL, etc.
// Ejemplo: Solo permitir solicitudes POST a una ruta específica
// const url = new URL(request.url);
// if (url.pathname !== '/send-email' || request.method !== 'POST') {
// return new Response('Not Found or Method Not Allowed', { status: 404 });
// }
try {
const { data, error } = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'], // Reemplazar destinatario
subject: 'Hello from Resend & Cloudflare Workers!',
// Usar el componente de React si aplica
react: <EmailTemplate firstName="Worker User" />,
// O usa HTML
// html: '<strong>It works from the Edge!</strong>',
});
if (error) {
console.error("Resend Error:", JSON.stringify(error)); // Registrar error
return Response.json({ error: 'Failed to send email via Resend' }, { status: 400 });
}
return Response.json(data);
} catch (e) {
console.error("Worker Error:", e); // Error del Worker:
// Registrar el stack de errores si es posible
if (e instanceof Error) {
console.error(e.stack);
}
return Response.json({ error: 'Internal Server Error in Worker' }, { status: 500 });
}
},
} // Optional: Use satisfies for better type checking
5. Configurar variable de entorno:Establece tu RESEND_API_KEY como un secreto para tu Worker usando Wrangler:
npx wrangler secret put RESEND_API_KEY
# Pega tu clave cuando se te solicite
6. Desplegar:
npx wrangler deploy # O 'wrangler dev' para pruebas locales
Invoca el Worker usando su URL asignada.
Envío con AWS Lambda
La extracción de la página de documentación de AWS Lambda agotó el tiempo de espera, por lo que esta sección se basa en principios generales.
El envío de correos electrónicos desde AWS Lambda usando Resend sigue un patrón similar:
1. Configurar función Lambda:Crea una función Lambda usando tu tiempo de ejecución preferido (Node.js es común y funciona bien con el SDK de Resend). Asegúrate de que tu Lambda tenga acceso a internet (por ejemplo, configurada dentro de una VPC con una NAT Gateway o usando la configuración predeterminada de VPC que permite la salida).
2. Instalar SDK de Resend:Incluye resend en el paquete de despliegue de tu función (por ejemplo, en package.json y ejecuta npm install antes de comprimir o usa Lambda Layers).
3. Almacenar clave API de forma segura:Usa AWS Secrets Manager o AWS Systems Manager Parameter Store para almacenar tu RESEND_API_KEY. Otorga al rol de ejecución de tu función Lambda permiso para leer este secreto. No codifiques la clave directamente en el código de la función Lambda.
4. Escribir código del manejador Lambda (Ejemplo Node.js):
// lambda_function.js (Ejemplo Node.js)
const { Resend } = require('resend');
// Clientes del SDK de AWS (si obtienes la clave de Secrets Manager/Parameter Store)
const { SecretsManagerClient, GetSecretValueCommand } = require("@aws-sdk/client-secrets-manager"); // V3 SDK
let resend; // Inicializar fuera del manejador para posible reutilización
async function getApiKey() {
// Reemplazar con el nombre/ARN y la región de tu secreto
const secretName = "your/resend/api/key/secret";
const client = new SecretsManagerClient({ region: "your-region" });
try {
const command = new GetSecretValueCommand({ SecretId: secretName });
const response = await client.send(command);
if ('SecretString' in response) {
// Asumiendo que el secreto almacena la clave directamente o como JSON tipo {"apiKey": "re_..."}
const secret = JSON.parse(response.SecretString); // Ajustar el análisis según cómo lo almacenaste
return secret.apiKey;
}
throw new Error("API Key not found in secret string");
} catch (error) {
console.error("Error retrieving API Key from Secrets Manager:", error); // Registrar error
throw error; // Relanzar para señalar fallo
}
}
exports.handler = async (event, context) => {
// Opcional: Analizar datos del evento si es necesario (por ejemplo, desde un disparador de API Gateway)
// const body = JSON.parse(event.body || '{}');
// const recipient = body.to;
try {
if (!resend) {
const apiKey = await getApiKey();
if (!apiKey) {
return { statusCode: 500, body: JSON.stringify({ message: "API Key configuration error" }) };
}
resend = new Resend(apiKey);
}
const { data, error } = await resend.emails.send({
from: 'Your Name <you@yourverifieddomain.com>',
to: ['delivered@resend.dev'], // Usar destinatario del evento o valor fijo
subject: 'Hello from Resend & AWS Lambda!',
html: '<strong>Lambda email sent successfully!</strong>',
// React requiere un paso de construcción o configuración de renderizado del lado del servidor dentro de Lambda
});
if (error) {
console.error('Resend Error:', error); // Registrar error
return {
statusCode: 400, // O estado apropiado basado en el error
body: JSON.stringify(error),
};
}
return {
statusCode: 200,
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' },
};
} catch (e) {
console.error('Lambda Handler Error:', e); // Error del manejador Lambda:
return {
statusCode: 500,
body: JSON.stringify({ message: 'Internal Server Error' }),
};
}
};
5. Configurar disparador:Configura un disparador para tu función Lambda (por ejemplo, API Gateway para solicitudes HTTP, cola SQS, evento de EventBridge).
6. Desplegar:Despliega tu función Lambda y sus dependencias.
Usando React Email con Resend
Una gran ventaja de Resend es su integración perfecta con React Email. React Email te permite construir plantillas de correo electrónico hermosas y responsivas usando componentes y sintaxis estándar de React.
Beneficios:
- Basado en componentes: Estructura correos electrónicos como aplicaciones web usando componentes reutilizables.
- Seguridad de tipos: Usa TypeScript para plantillas más robustas.
- Desarrollo local: Desarrolla y previsualiza correos electrónicos localmente en tu navegador.
- Sin lenguajes de plantillas complejos: Evita sintaxis de plantillas de correo electrónico propietarias o complejas.
Configuración (Basado en la documentación de React Email - puede variar ligeramente):
Instalar: Añade react-email y sus componentes principales a tu proyecto. Probablemente también necesitarás resend si envías a través de ellos.
npm install react-email @react-email/components resend
# o yarn/pnpm
Crear plantillas de correo electrónico: Crea archivos .tsx para tus correos electrónicos, generalmente en un directorio dedicado emails/.
// emails/welcome.tsx
import { Html, Button, Text } from '@react-email/components';
import * as React from 'react';
interface WelcomeEmailProps {
name: string;
signupLink: string;
}
export const WelcomeEmail: React.FC<Readonly<WelcomeEmailProps>> = ({ name, signupLink }) => (
<Html>
<Text>Hello {name},</Text>
<Text>Welcome aboard! Click the button below to get started.</Text>
<Button href={signupLink}>Complete Signup</Button>
</Html>
);
export default WelcomeEmail; // La exportación por defecto suele ser útil
Integrar con la lógica de envío: En la ruta de tu API backend o función serverless, importa el componente de correo electrónico y pásalo a la opción react de Resend.
// Example in a Next.js API Route (app/api/send-welcome/route.ts)
import { Resend } from 'resend';
import WelcomeEmail from '../../../emails/welcome'; // Ajustar ruta
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST(request: Request) {
try {
const body = await request.json(); // Asumiendo { email: '...', name: '...' } en el cuerpo
const signupUrl = "<https://yoursite.com/signup-step2>"; // URL de ejemplo
const { data, error } = await resend.emails.send({
from: 'Your App <welcome@yourverifieddomain.com>',
to: [body.email],
subject: 'Welcome to Our Platform!',
// Pasar el componente de React directamente
react: WelcomeEmail({ name: body.name, signupLink: signupUrl }),
});
if (error) {
return Response.json({ error }, { status: 400 });
}
return Response.json(data);
} catch (error) {
return Response.json({ error }, { status: 500 });
}
}
Resend (y el proceso de construcción de React Email si se usa de forma independiente) se encarga de renderizar el componente de React a HTML seguro para correo electrónico detrás de escena. Esto mejora significativamente la experiencia del desarrollador para crear y mantener plantillas de correo electrónico.
Conclusión
Resend ofrece una solución moderna y centrada en el desarrollador para enviar correos electrónicos. Su API limpia, excelentes integraciones con frameworks (especialmente con React Email), enfoque en la entregabilidad y características útiles como correos electrónicos de prueba y webhooks lo convierten en una opción atractiva para aplicaciones de todos los tamaños.
Siguiendo los pasos descritos en esta guía—configurando tu cuenta, verificando tu dominio, eligiendo el método de integración adecuado para tu framework y aprovechando herramientas como React Email—puedes integrar rápida y fiablemente una funcionalidad de correo electrónico robusta en tus proyectos. Recuerda siempre manejar las claves API de forma segura y monitorear tu actividad de envío a través del panel de control de Resend y los webhooks para garantizar una entregabilidad óptima y la experiencia del usuario.
¿Quieres una plataforma integrada, todo en uno, para que tu equipo de desarrolladores trabaje con máxima productividad?
¡Apidog cumple todas tus demandas y reemplaza a Postman a un precio mucho más asequible!