skipToMainContentskipToFooter
NeuraAPI
NeuraAPI
Navigation
Guide 25 août 2026 13 min de lecture

Email transactionnel avec Next.js et Resend : le guide complet

Partager :

Emails de confirmation, réinitialisation de mot de passe, reçus de paiement : les emails transactionnels sont l'épine dorsale de tout SaaS. Avec Resend et son intégration native de React Email, vous envoyez des emails fiables et beaux en moins d'une heure.

Pourquoi Resend ?

  • API minimaliste : un seul appel fetch suffit, SDK officiel TypeScript excellent.
  • React Email : écrivez vos templates en JSX typé, versionnés dans votre repo.
  • Délivrabilité soignée : IPs dédiées, SPF/DKIM guidés pas à pas.
  • Tier gratuit généreux : 100 emails/jour, 3 000/mois — largement assez pour démarrer.

Étape 1 : Configuration du domaine

Créez un compte sur resend.com, ajoutez votre domaine, puis ajoutez chez votre registrar les enregistrements demandés :

# Enregistrements DNS typiques
SPF   : TXT  @                 "v=spf1 include:amazonses.com ~all"
DKIM  : TXT  resend._domainkey "p=MIGfMA0GCSqGSIb3..." (clé fournie)
DMARC : TXT  _dmarc           "v=DMARC1; p=none; rua=mailto:dmarc@votredomaine.fr"

Vérifiez que le statut passe à « Verified » avant tout envoi. Sans DKIM valide, vos emails finiront en spam chez Gmail et Outlook.

Étape 2 : Installation

npm install resend react-email @react-email/components

# .env.local
RESEND_API_KEY=re_xxxxxxxxxxxx
EMAIL_FROM="NeuraAPI <noreply@votredomaine.fr>"

Étape 3 : Un template React Email

Les templates en JSX sont testables localement avec npx email dev.

// src/emails/WelcomeEmail.tsx
import { Html, Heading, Text, Button, Section } from '@react-email/components'

export function WelcomeEmail({ name, url }: { name: string; url: string }) {
  return (
    <Html lang="fr">
      <Section style={{ padding: 32, fontFamily: 'sans-serif' }}>
        <Heading>Bienvenue {name} 👋</Heading>
        <Text>Votre compte est prêt. Confirmez votre adresse pour commencer :</Text>
        <Button href={url} style={{ background: '#4f46e5', color: '#fff', padding: '12px 24px', borderRadius: 8 }}>
          Confirmer mon email
        </Button>
        <Text style={{ color: '#888' }}>Ce lien expire dans 24 heures.</Text>
      </Section>
    </Html>
  )
}

Étape 4 : Envoyer depuis une route API

// src/app/api/email/welcome/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { Resend } from 'resend'
import { WelcomeEmail } from '@/emails/WelcomeEmail'

const resend = new Resend(process.env.RESEND_API_KEY!)

export async function POST(req: NextRequest) {
  const { email, name, confirmUrl } = await req.json()

  const { data, error } = await resend.emails.send({
    from: process.env.EMAIL_FROM!,
    to: email,
    subject: 'Confirmez votre compte',
    react: WelcomeEmail({ name, url: confirmUrl }),
  })

  if (error) {
    console.error('Resend error:', error)
    return NextResponse.json({ error: 'send_failed' }, { status: 500 })
  }

  return NextResponse.json({ id: data?.id })
}

Notez la gestion d'erreur explicite : Resend ne lève pas d'exception, il retourne un objet error. Loggez systématiquement.

Étape 5 : Gérer les bounces avec les webhooks

Pour maintenir votre réputation d'expéditeur, traitez les événementsemail.bounced et email.complained :

// src/app/api/webhooks/resend/route.ts
export async function POST(req: NextRequest) {
  const event = await req.json()

  switch (event.type) {
    case 'email.bounced':
      await db.user.update({
        where: { email: event.data.to[0] },
        data: { emailBlocked: true },
      })
      break
    case 'email.complained':
      // Désinscription immédiate obligatoire
      await db.newsletter.deleteMany({ where: { email: event.data.to[0] } })
      break
  }

  return NextResponse.json({ received: true })
}

Bonnes pratiques délivrabilité

  • Un sous-domaine dédié : envoyez depuis mail.votredomaine.fr pour isoler votre réputation du domaine principal.
  • Lien de désinscription visible même en transactionnel — c'est une exigence RGPD.
  • Jamais d'adresses gratuites en from : noreply@gmail.com est rejeté par beaucoup de FAI.
  • Retry asynchrone : mettez les envois critiques dans une file (Vercel Queues, Upstash) plutôt qu'en synchrone dans la requête utilisateur.
  • Surveillez vos stats : taux de bounce > 5 % = alerte rouge.

Passez moins de temps sur la plomberie

Nos templates SaaS incluent Resend préconfiguré : emails transactionnels, webhooks et templates React Email prêts à l'emploi. Découvrir les templates

Conclusion

Resend + React Email rendent l'email transactionnel enfin agréable en Next.js : templates typés, API simple, webhooks propres. Configurez vos DNS correctement dès le premier jour, surveillez vos bounces, et vos emails arriveront à destination. Nos templates incluent toute cette infrastructure déjà branchée.

Articles liés