Comment intégrer Resend dans ton application pour envoyer des emails marketing ?

Publiée le 17 février 2024 · Temps de lecture de 2 minutes · Publié par Melvynx

Comment intégrer facilement Resend dans ton application pour envoyer des emails marketing ?

On va utiliser :

  • nextauth
  • nextjs app directory
  • resend

On va voir :

  1. Comment ajouter Resend
  2. Comment créer une Audience (un groupe d'emails)
  3. Comment ajouter tous les utilisateurs dans cette audience

1. Ajouter Resend

La première étape est de créer un compte sur Resend puis de venir ajouter ton domaine afin de pouvoir envoyer des emails.

Une fois fait, tu vas venir récupérer ton API KEY.

Une fois fait, tu vas devoir créer une Audience.

Puis tu vas venir copier le audience_id de cette audience.

Tu vas pouvoir ensuite dans ton application, dans le fichier .env, rajouter :

RESEND_API_KEY=YOUR_API_KEY
RESEND_AUDIENCE_ID=YOUR_AUDIENCE_ID

Puis installer le package resend :

npm i resend

Et finalement, setup Resend dans ton application :

import { Resend } from "resend";

export const resend = new Resend(process.env.RESEND_API_KEY);

2. Création de contact

Maintenant, tu vas pouvoir ajouter un event dans NextAuth afin de créer un contact pour chaque utilisateur.

export const {
  handlers,
  auth: baseAuth,
  // TODO : Use req callback
} = NextAuth((req) => ({
  ...,
  events: {
    createUser: async (message) => {
      const user = message.user;

      if (!user.email) {
        return;
      }

      const resendCustomerId = await setupResendCustomer(user);

      await prisma.user.update({
        where: {
          id: user.id,
        },
        data: {
          resendCustomerId,
        },
      });
    },
  },
}));

export const setupResendCustomer = async (user: User) => {
  const contact = await resend.contacts.create({
    audienceId: env.RESEND_AUDIENCE_ID,
    email: user.email,
    firstName: user.name ?? "",
    unsubscribed: false,
  });

  if (!contact.data) return;

  return contact.data.id;
};

De cette manière, chaque fois qu'une personne va créer un compte sur ton application, elle sera ajoutée à ton Audience Resend.

3. Envoi d'email

Maintenant, tu peux aller dans Broadcast pour pouvoir envoyer un email à toute ton audience.

C'est très simple et leur éditeur d'email est très user-friendly.

Pricing

Tu es limité à une audience et 1000 contacts pour un plan gratuit.

Après, c'est 40$ / mois.

Tu veux aller plus vite ?

Rejoins ma boilerplate et mes cours pour créer une application de A à Z rapidement.

Récupère ton accès NOW.TS, la boilerplate Next.js pour créer des applications de PRO peu importe ton niveau.

Profite d'un cours complet afin de créer des applications SaaS rapidement et efficacement.

PrivacyTermsapp icon