Configurer Resend pour envoyer des emails depuis un projet Astro

Introduction

L’une des fonctionnalités les plus basiques — mais souvent sous-estimées — d’un site web, c’est le formulaire de contact.
Entre les limitations du “mailto:” et la complexité d’un backend complet, trouver le bon équilibre n’est pas toujours évident.

Dans ce guide, je te montre comment j’ai intégré Resend à mon projet Astro pour gérer l’envoi d’emails de manière simple, fiable et sécurisée.

1. Pourquoi Resend ?

Resend est un service d’envoi d’emails moderne, pensé pour les développeurs :

aucune configuration SMTP à gérer,
une API claire et rapide,
et un tableau de bord propre pour suivre les envois.

C’est aussi un outil RGPD-friendly, contrairement à d’autres solutions plus “historiques”.
Pour un portfolio, une landing page ou un petit site client, c’est parfait : léger, propre, efficace.

2. Préparer le projet

Installe le SDK officiel :

npm install resend

Ensuite, ajoute ta clé API dans un fichier .env à la racine du projet :

RESEND_API_KEY=your_resend_api_key_here

⚠️ Ne jamais exposer cette clé côté client : on la manipulera uniquement côté serveur (dans un endpoint Astro).

3. Créer une route API pour l’envoi d’email

Dans Astro, les endpoints permettent d’ajouter facilement un peu de logique serveur sans dépendre d’un framework complet.

Crée un fichier : 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@votredomaine.dev>",
      to: "hey@alxgb.dev",
      subject: `Nouveau message de ${name}`,
      reply_to: email,
      text: message,
    });

    return new Response(
      JSON.stringify({ success: true, message: "Email envoyé avec succès" }),
      { status: 200 }
    );
  } catch (error) {
    console.error(error);
    return new Response(
      JSON.stringify({ success: false, message: "Erreur lors de l’envoi" }),
      { status: 500 }
    );
  }
};

Ce qu’il faut retenir : • Le code tourne côté serveur, donc la clé API reste confidentielle. • Le endpoint renvoie une réponse JSON simple, exploitable côté front.

4. Créer le formulaire côté client

Côté front, on reste dans la simplicité : un petit formulaire avec un fetch vers /api/contact, et quelques états d’affichage selon la réponse.

<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 ? "Message envoyé ✔" : "Une erreur est survenue ❌");
  }}
  class="max-w-md space-y-4"
>
  <input
    name="name"
    type="text"
    placeholder="Votre nom"
    required
    class="w-full border p-2 rounded"
  />
  <input
    name="email"
    type="email"
    placeholder="Votre email"
    required
    class="w-full border p-2 rounded"
  />
  <textarea
    name="message"
    placeholder="Votre message"
    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"
  >
    Envoyer
  </button>
</form>

Quelques bonnes pratiques : • Toujours valider les champs côté client et côté serveur. • Éviter d’exposer la clé API — tout passe par ton endpoint Astro. • Ajouter une gestion d’état visuelle si tu veux améliorer l’expérience utilisateur (chargement, succès, erreur).

5. Aller un peu plus loin

Une fois la base en place, tu peux facilement faire évoluer le système : • Créer un template HTML plus élégant pour l’email reçu. • Ajouter une vérification anti-spam légère (ex : champ caché ou token hCaptcha). • Utiliser un sous-domaine dédié pour l’envoi d’emails (ex : mail.mondomaine.dev).

Conclusion

Mettre en place l’envoi d’emails dans Astro avec Resend, c’est à la fois rapide et propre. Tu gardes la maîtrise complète du code et des données, sans te battre avec un serveur mail ou un service lourd.

L’approche Astro + Resend est idéale pour un site vitrine ou un portfolio : • intégration rapide, • code minimal, • envoi d’emails fiable, • et une maintenance quasi nulle.

C’est le genre de détail invisible pour l’utilisateur final… mais qui change tout dans la qualité d’un projet livré.

Découvrir Resend