Configurar Resend para enviar correos desde un proyecto Astro

Introducción

Una de las funciones más básicas de un sitio web (y de las más subestimadas) es el formulario de contacto. Entre las limitaciones de mailto: y la complejidad de un backend completo, encontrar el equilibrio no siempre resulta evidente.

En esta guía te muestro cómo integré Resend en mi proyecto Astro para gestionar el envío de correos de forma simple, fiable y segura.

1. ¿Por qué Resend?

Resend es un servicio de envío de correo moderno, pensado para desarrolladores:

sin configuración SMTP que gestionar,
una API clara y rápida,
y un panel limpio para hacer seguimiento de los envíos.

Además es respetuoso con el RGPD, a diferencia de otras soluciones más antiguas. Para un portfolio, una landing o un sitio pequeño de cliente, encaja a la perfección: ligero, limpio y eficaz.

2. Preparar el proyecto

Instala el SDK oficial:

npm install resend

Después añade tu clave de API en un archivo .env en la raíz del proyecto:

RESEND_API_KEY=your_resend_api_key_here

⚠️ Nunca expongas esta clave en el cliente: se maneja únicamente en el servidor, dentro de un endpoint de Astro.

3. Crear una ruta de API para el envío

En Astro, los endpoints permiten añadir algo de lógica de servidor sin depender de un framework completo.

Crea un archivo: src/pages/api/contact.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 data = await request.json();

  try {
    const { name, email, message } = data;

    await resend.emails.send({
      from: "Portfolio Contact <contact@tudominio.dev>",
      to: "hey@alxgb.dev",
      subject: `Nuevo mensaje de ${name}`,
      reply_to: email,
      text: message,
    });

    return new Response(
      JSON.stringify({ success: true, message: "Correo enviado correctamente" }),
      { status: 200 }
    );
  } catch (error) {
    console.error(error);
    return new Response(
      JSON.stringify({ success: false, message: "Error en el envío" }),
      { status: 500 }
    );
  }
};

Lo importante aquí: • El código se ejecuta en el servidor, así que la clave de API permanece privada. • El endpoint devuelve una respuesta JSON sencilla que el front puede aprovechar.

4. Crear el formulario en el cliente

En el front, mantenlo simple: un formulario pequeño con un fetch a /api/contact y algunos estados de visualización según la respuesta.

<form
  onSubmit={async (e) => {
    e.preventDefault();
    const form = e.target;
    const data = Object.fromEntries(new FormData(form));

    const res = await fetch("/api/contact", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });

    const { success } = await res.json();
    form.reset();

    alert(success ? "Mensaje enviado ✔" : "Se ha producido un error ❌");
  }}
  class="max-w-md space-y-4"
>
  <input
    name="name"
    type="text"
    placeholder="Tu nombre"
    required
    class="w-full border p-2 rounded"
  />
  <input
    name="email"
    type="email"
    placeholder="Tu correo"
    required
    class="w-full border p-2 rounded"
  />
  <textarea
    name="message"
    placeholder="Tu mensaje"
    required
    class="w-full border p-2 rounded h-32"
  ></textarea>

  <button
    type="submit"
    class="rounded bg-black text-white px-4 py-2 hover:bg-neutral-800 transition"
  >
    Enviar
  </button>
</form>

Algunas buenas prácticas: • Validar siempre los campos tanto en el cliente como en el servidor. • No exponer nunca la clave de API: todo pasa por tu endpoint de Astro. • Añadir una gestión visual de estados (carga, éxito, error) si quieres mejorar la experiencia.

5. Ir un poco más lejos

Una vez montada la base, el sistema es fácil de ampliar: • Crear una plantilla HTML más cuidada para el correo recibido. • Añadir una verificación anti-spam ligera (un campo oculto o un token de hCaptcha). • Usar un subdominio dedicado al envío (por ejemplo mail.midominio.dev).

Conclusión

Montar el envío de correos en Astro con Resend es rápido y limpio a la vez. Mantienes el control total del código y de los datos, sin pelearte con un servidor de correo ni con un servicio pesado.

La combinación Astro + Resend es ideal para un sitio corporativo o un portfolio: • integración rápida, • código mínimo, • envío fiable, • y un mantenimiento casi nulo.

Es el tipo de detalle que el usuario final nunca ve y que lo cambia todo en la calidad de un proyecto entregado.

Descubrir Resend