Blog
Point de vue

Comment utiliser l'API Resend (Guide du débutant)

Le courriel est crucial. Resend simplifie l'envoi d'emails transactionnels et marketing avec des API robustes et des analyses détaillées.

Louis Dupont

Louis Dupont

5 June 2025

Comment utiliser l'API Resend (Guide du débutant)

L'e-mail est un composant essentiel des applications web modernes, utilisé pour tout, de l'intégration et des notifications des utilisateurs aux réinitialisations de mot de passe et aux campagnes marketing. Cependant, la création et la gestion d'une infrastructure d'envoi d'e-mails fiable peuvent être complexes et prendre du temps. C'est là que les services d'API d'e-mail comme Resend entrent en jeu.

Resend propose une plateforme conviviale pour les développeurs, conçue pour simplifier le processus d'envoi d'e-mails transactionnels et marketing. Elle fournit des API robustes, des analyses détaillées et une excellente délivrabilité, ce qui permet aux développeurs de se concentrer sur la création de leurs applications plutôt que de se soucier de l'infrastructure d'e-mail.

Ce guide complet vous expliquera tout ce que vous devez savoir pour commencer à utiliser l'API Resend, de la compréhension de ses concepts de base et de sa tarification à son intégration avec divers frameworks et plateformes populaires.

💡
Vous voulez un excellent outil de test d'API qui génère une documentation d'API magnifique ?

Vous voulez une plateforme intégrée, tout-en-un, pour que votre équipe de développeurs travaille ensemble avec une productivité maximale ?

Apidog répond à toutes vos demandes et remplace Postman à un prix beaucoup plus abordable !
button

Qu'est-ce que Resend ?

Resend est une plateforme d'API d'e-mail conçue pour les développeurs. Elle vise à offrir une expérience développeur supérieure à celle des anciens fournisseurs de services de messagerie (ESP). Les principales fonctionnalités incluent :

Resend se positionne comme une alternative plus moderne et axée sur les développeurs aux acteurs établis comme SendGrid, Mailgun ou AWS SES, en se concentrant sur la facilité d'utilisation, la fiabilité et une bonne intégration avec les flux de travail de développement web modernes.

Quelle est la tarification de Resend ?

Resend propose une structure de tarification échelonnée basée sur le nombre d'e-mails envoyés par mois, avec des considérations distinctes pour les e-mails transactionnels et marketing (bien que la page de tarification détaille principalement les forfaits transactionnels).

Voici une ventilation de leurs forfaits d'e-mails transactionnels (au moment de la rédaction) :

Forfait gratuit :

Forfait Pro :

Forfait Scale :

Forfait Entreprise :

Considérations clés :

Le forfait gratuit est suffisamment généreux pour les petits projets ou à des fins de test. Les forfaits Pro et Scale s'adressent aux applications en croissance avec des volumes d'e-mails et des exigences de fonctionnalités croissants. Le forfait Entreprise fournit des solutions sur mesure pour les opérations à grande échelle.

Premiers pas avec Resend

Avant de pouvoir envoyer des e-mails, vous devez configurer votre compte Resend et configurer votre domaine d'envoi.

1. Inscrivez-vous et créez une clé API

2. Vérifiez votre domaine

Pour envoyer des e-mails qui semblent professionnels et éviter les filtres anti-spam, vous devez vérifier un domaine que vous possédez. L'envoi à partir de domaines non vérifiés ou d'adresses par défaut comme onboarding@resend.dev ne convient qu'aux tests initiaux.

3. Envoi d'e-mails de test

Pendant le développement, il est essentiel de tester l'envoi d'e-mails sans affecter la réputation de votre domaine ni envoyer accidentellement à de vrais utilisateurs. Resend fournit des adresses e-mail spéciales pour tester différents scénarios :

L'utilisation de ces adresses de test vous permet de vérifier votre intégration et de tester en toute sécurité les gestionnaires de webhooks pour les événements de rebond et de plainte.

Intégration de Resend avec des frameworks

Resend fournit des SDK officiels et des méthodes d'intégration simples pour divers langages et frameworks. Nous allons couvrir quelques exemples populaires basés sur la documentation fournie. Le concept de base implique généralement :

  1. Installation du SDK Resend (si disponible) ou utilisation de requêtes HTTP standard.
  2. Initialisation du client Resend avec votre clé API (chargée en toute sécurité, généralement à partir de variables d'environnement).
  3. Appel de la méthode emails.send (ou équivalent) avec des paramètres tels que from, to, subject et html ou react.

Envoi avec Next.js

Next.js est un framework React populaire. Resend s'intègre bien, en particulier avec React Email.

1. Installer :

npm install resend
# ou
yarn add resend
# ou
pnpm add resend

2. Créer un modèle d'e-mail (facultatif mais recommandé) : utilisez React Email ou créez un simple composant React pour le corps de votre e-mail.

// components/email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

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

3. Créer un itinéraire API : créez un gestionnaire d'itinéraire API pour envoyer l'e-mail.

// app/api/send/route.ts (Exemple de routeur d'application)
import { EmailTemplate } from '../../../components/email-template'; // Ajuster le chemin si nécessaire
import { Resend } from 'resend';

// Assurez-vous que RESEND_API_KEY est défini dans votre .env.local
const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
  try {
    const { data, error } = await resend.emails.send({
      from: 'Votre nom <vous@votredomainevérifié.com>', // Utilisez votre domaine vérifié
      to: ['delivered@resend.dev'], // Remplacez par le destinataire ou l'adresse de test
      subject: 'Bonjour de Resend et Next.js !',
      react: EmailTemplate({ firstName: 'Test' }), // Transmettez les propriétés à votre modèle
      // Alternativement, utilisez `html` :
      // html: '<strong>Ça marche !</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 (Exemple de routeur de pages - adapter les importations/réponse)
// 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 { // Ajout de try...catch pour une meilleure gestion des erreurs
//     const { data, error } = await resend.emails.send({
//       from: 'Votre nom <vous@votredomainevérifié.com>',
//       to: ['delivered@resend.dev'],
//       subject: 'Bonjour le monde',
//       react: EmailTemplate({ firstName: 'John' }),
//     });
//
//     if (error) {
//       return res.status(400).json(error);
//     }
//
//     res.status(200).json(data);
//   } catch (e) {
//      res.status(500).json({ error: 'Erreur interne du serveur' });
//   }
// };

4. Déclencher : appelez ce point de terminaison API depuis votre frontend (par exemple, après la soumission d'un formulaire) à l'aide de fetch ou d'une bibliothèque comme axios. N'oubliez pas de remplacer les valeurs d'espace réservé par votre domaine vérifié et vos listes de destinataires réels.

Envoi avec Astro

Astro est un constructeur de site statique moderne qui prend également en charge le rendu côté serveur (SSR).

1. Installer Resend :

npm install resend
# ou
yarn add resend
# ou
pnpm add resend

2. Installer l'adaptateur SSR : Astro a besoin d'un adaptateur SSR pour exécuter du code côté serveur à la demande. Installez-en un adapté à votre cible de déploiement (par exemple, @astrojs/node, @astrojs/vercel, @astrojs/cloudflare).

npx astro add node # Exemple pour l'adaptateur Node.js

Suivez les instructions de configuration de l'adaptateur dans votre astro.config.mjs.

3. Ajouter la clé API : stockez votre RESEND_API_KEY dans votre fichier .env.

4. Créer une action Astro : utilisez les actions Astro (fonctionnalité expérimentale au moment de la rédaction, consultez la documentation Astro pour connaître l'état actuel) ou les points de terminaison API standard.

// src/actions/index.ts (Utilisation des actions Astro)
import { ActionError, defineAction, z } from 'astro:actions';
import { Resend } from 'resend';

// Assurez-vous que RESEND_API_KEY est disponible via import.meta.env
const resend = new Resend(import.meta.env.RESEND_API_KEY);

export const server = {
  send: defineAction({
    // Exemple : définir la validation d'entrée si nécessaire
    // input: z.object({ email: z.string().email() }),
    handler: async (/* { email } - si vous utilisez l'entrée */) => {
      try { // Ajout de try...catch
        const { data, error } = await resend.emails.send({
          from: 'Votre nom <vous@votredomainevérifié.com>',
          to: ['delivered@resend.dev'], // Remplacez par le destinataire
          subject: 'Bonjour de Resend et Astro !',
          html: '<strong>Astro fonctionne !</strong>',
          // Vous pouvez également utiliser des modèles React si vous configurez React dans Astro
          // react: <YourAstroCompatibleReactEmail firstName="Astro" />
        });

        if (error) {
          console.error("Erreur Resend :", error); // Journaliser l'erreur
          // L'envoi d'ActionError aide Astro à gérer les erreurs avec élégance
          throw new ActionError({
            code: 'BAD_REQUEST', // Ou être plus spécifique en fonction de l'erreur
            message: error.message || 'Échec de l'envoi de l'e-mail',
          });
        }

        return data; // Retourner les données de réussite
      } catch (e) {
         console.error("Erreur du gestionnaire :", e);
         // Relancer ou lancer un nouvel ActionError
         throw new ActionError({
             code: 'INTERNAL_SERVER_ERROR',
             message: 'Une erreur inattendue s'est produite.',
         });
      }
    },
  }),
};

// Alternative : point de terminaison API (par exemple, 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 les données proviennent du corps de la requête
//   try {
//     const { data, error } = await resend.emails.send({ /* ... paramètres de l'e-mail ... */ });
//     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: "Erreur du serveur"}), { status: 500 });
//   }
// }

5. Déclencher : appelez l'action ou le point de terminaison à partir de vos composants ou pages Astro, généralement dans un gestionnaire de soumission de formulaire.

Envoi avec Bun

Bun est un runtime JavaScript rapide avec un bundler, un transpiler, un exécuteur de tâches et un client npm intégrés.

1. Installer :

bun install resend

2. Créer un modèle d'e-mail (facultatif) : comme pour Next.js, vous pouvez créer un fichier .tsx pour votre modèle d'e-mail React.

// email-template.tsx
import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

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

3. Créer un script de serveur Bun : créez un script (par exemple, index.tsx) pour exécuter un serveur HTTP simple à l'aide de Bun.

// index.tsx
import { Resend } from 'resend';
import { EmailTemplate } from './email-template'; // En supposant qu'il se trouve dans le même répertoire

// Charger la clé API à partir des variables d'environnement
const resendApiKey = process.env.RESEND_API_KEY;
if (!resendApiKey) {
  console.error("Erreur : la variable d'environnement RESEND_API_KEY n'est pas définie.");
  process.exit(1); // Quitter si la clé est manquante
}
const resend = new Resend(resendApiKey);

const server = Bun.serve({
  port: 3000,
  async fetch(req) { // Ajout de l'argument 'req'
    // Facultatif : vérifier la méthode de la requête, le chemin, etc.
    // if (new URL(req.url).pathname !== '/send') {
    //   return new Response("Non trouvé", { status: 404 });
    // }
    // if (req.method !== 'POST') {
    //    return new Response("Méthode non autorisée", { status: 405 });
    // }

    try {
      const { data, error } = await resend.emails.send({
        from: 'Votre nom <vous@votredomainevérifié.com>',
        to: ['delivered@resend.dev'],
        subject: 'Bonjour de Resend et Bun !',
        react: EmailTemplate({ firstName: 'Utilisateur Bun' }),
        // Ou utiliser html : '<strong>Bun fonctionne !</strong>'
      });

      if (error) {
        console.error("Erreur Resend :", error);
        // Retourner une réponse d'erreur JSON appropriée
        return new Response(JSON.stringify({ error: error.message || 'Échec de l'envoi de l'e-mail' }), {
          status: 500, // Ou 400 selon le type d'erreur
          headers: { 'Content-Type': 'application/json' },
        });
      }

      // Retourner la réponse de réussite
      return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' },
      });

    } catch (e) {
        console.error("Erreur du serveur :", e);
        return new Response(JSON.stringify({ error: 'Erreur interne du serveur' }), {
          status: 500,
          headers: { 'Content-Type': 'application/json' },
        });
    }
  },
  error(error) { // Ajout d'un gestionnaire d'erreurs de base pour le serveur lui-même
      return new Response(`<pre>${error}\\\\\\\\n${error.stack}</pre>`, {
          headers: { "Content-Type": "text/html" },
      });
  },
});

console.log(`Écoute sur <http://localhost>:${server.port} ...`);

4. Exécuter : démarrez le serveur à l'aide de RESEND_API_KEY=your_api_key bun run index.tsx. L'accès à http://localhost:3000 (ou le déclenchement de l'itinéraire/de la méthode spécifique que vous avez défini) enverra l'e-mail.

Envoi avec Nuxt

Nuxt est un framework Vue.js populaire.

1. Installer :

npm install resend
# ou
yarn add resend
# ou
pnpm add resend

2. Créer un itinéraire de serveur : Nuxt utilise un répertoire server/ pour la logique du backend. Créez un fichier comme server/api/send.post.ts (le .post indique qu'il gère les requêtes POST).

// server/api/send.post.ts
import { Resend } from 'resend';

// Accéder à la clé API en toute sécurité (par exemple, via runtimeConfig dans nuxt.config.ts)
// Voir : <https://nuxt.com/docs/guide/going-further/runtime-config>
const config = useRuntimeConfig();
const resend = new Resend(config.resendApiKey); // En supposant que la clé est définie dans la configuration d'exécution

export default defineEventHandler(async (event) => {
  // Facultatif : lire le corps si les données proviennent de la requête
  // const body = await readBody(event);

  try {
    const data = await resend.emails.send({
      from: 'Votre nom <vous@votredomainevérifié.com>',
      to: ['delivered@resend.dev'],
      subject: 'Bonjour de Resend et Nuxt !',
      html: '<strong>Nuxt fonctionne !</strong>',
      // Vous pouvez intégrer des modèles d'e-mails Vue (par exemple, en utilisant vue-email)
      // Voir : <https://github.com/Dave136/vue-email>
    });

    // Nuxt 3 gère automatiquement le retour des données au format JSON
    return data;

  } catch (error: any) { // Capturer des types d'erreurs spécifiques si possible
    console.error("Erreur Resend :", error);
    // Lancer une erreur que Nuxt peut gérer, en définissant le code d'état
    throw createError({
        statusCode: 400, // Ou 500
        statusMessage: 'Échec de l'envoi de l'e-mail',
        data: error // Inclure éventuellement les détails de l'erreur
    });
  }
});

// Dans votre nuxt.config.ts, définissez runtimeConfig :
// export default defineNuxtConfig({
//   runtimeConfig: {
//     resendApiKey: process.env.NUXT_RESEND_API_KEY, // Côté serveur uniquement
//     public: {
//       // Clés publiques accessibles côté client
//     }
//   }
// })
// Et définissez NUXT_RESEND_API_KEY dans votre .env

3. Déclencher : appelez le point de terminaison /api/send (à l'aide de la méthode POST) à partir de vos pages ou composants Nuxt à l'aide de $fetch ou useFetch.

Envoi avec les fonctions Vercel

Les fonctions Vercel sont des fonctions sans serveur qui s'intègrent de manière transparente à Next.js ou peuvent être utilisées seules. L'exemple Next.js ci-dessus démontre déjà l'utilisation dans un environnement Vercel. Si vous utilisez les fonctions Vercel sans Next.js (par exemple, avec un générateur de site statique ou un autre framework déployé sur Vercel), l'approche est similaire :

1. Créer une fonction : créez un fichier dans le répertoire api/ de votre projet (par exemple, api/send.ts).

// api/send.ts (Exemple pour la fonction Vercel standard)
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { Resend } from 'resend'; // Vous devrez

Explore more

Fathom-R1-14B : Modèle de raisonnement IA avancé d'Inde

Fathom-R1-14B : Modèle de raisonnement IA avancé d'Inde

L'IA en expansion rapide. Fathom-R1-14B (14,8 milliards de paramètres) excelle en raisonnement mathématique et général, conçu par Fractal AI Research.

5 June 2025

Mistral Code : L'assistant de codage le plus personnalisable basé sur l'IA pour les entreprises

Mistral Code : L'assistant de codage le plus personnalisable basé sur l'IA pour les entreprises

Découvrez Mistral Code, l'IA d'aide au code la plus personnalisable pour les entreprises.

5 June 2025

Comment Claude Code transforme le codage de l'IA en 2025

Comment Claude Code transforme le codage de l'IA en 2025

Découvrez Claude Code en 2025 : codage IA révolutionné. Fonctionnalités, démo, et pourquoi il gagne du terrain après Windsurf d'Anthropic. Indispensable !

5 June 2025

Pratiquez le Design-first d'API dans Apidog

Découvrez une manière plus simple de créer et utiliser des API

S'inscrire gratuitementTélécharger