Configurez Resend pour les emails transactionnels — vérification de domaine, templates et envoi.

Configuration des emails

ScaleRocket utilise Resend pour envoyer des emails transactionnels et React Email pour construire les templates. Tous les templates d'email se trouvent dans packages/emails/.

Créer un compte Resend

Allez sur resend.com et inscrivez-vous
Vous bénéficiez d'un plan gratuit avec 100 emails/jour — suffisant pour le développement

Obtenir votre clé API

Dans le tableau de bord Resend, allez dans API Keys
Cliquez sur Create API Key
Donnez-lui un nom (ex. "ScaleRocket Development")
Choisissez la permission Full access
Copiez la clé (commence par re_)

Ajoutez-la à votre environnement :

# apps/web/.env.local
RESEND_API_KEY=re_123456789...

Vérifier votre domaine

Pour la production, vous devez vérifier un domaine d'envoi pour que les emails proviennent de hello@yourdomain.com au lieu de onboarding@resend.dev.

Dans le tableau de bord Resend, allez dans Domains
Cliquez sur Add Domain
Entrez votre domaine (ex. yourdomain.com)
Ajoutez les enregistrements DNS fournis par Resend :
- Enregistrement SPF (TXT)
- Enregistrements DKIM (CNAME)
- Enregistrement DMARC (TXT, optionnel mais recommandé)
Attendez la vérification (généralement quelques minutes)

Note : Pour le développement local, vous pouvez ignorer la vérification de domaine. Resend vous permet d'envoyer à votre propre adresse email depuis onboarding@resend.dev.

Templates d'email

ScaleRocket inclut des templates prêts à l'emploi dans packages/emails/ :

packages/emails/
├── src/
│   ├── templates/
│   │   ├── welcome.tsx
│   │   ├── onboarding-day3.tsx
│   │   ├── trial-started.tsx
│   │   ├── trial-ending.tsx
│   │   ├── subscription-activated.tsx
│   │   ├── payment-failed.tsx
│   │   ├── payment-recovered.tsx
│   │   ├── invoice.tsx
│   │   ├── plan-changed.tsx
│   │   ├── goodbye.tsx
│   │   ├── winback.tsx
│   │   ├── feedback-request.tsx
│   │   └── inactivity.tsx
│   └── components/
│       ├── header.tsx           # Shared email header
│       ├── footer.tsx           # Shared email footer
│       └── button.tsx           # CTA button component
├── package.json
└── tsconfig.json

Prévisualiser les templates

React Email fournit un serveur de prévisualisation en temps réel. Lancez-le depuis la racine :

pnpm --filter emails dev

Cela démarre un serveur de prévisualisation sur http://localhost:3001 où vous pouvez parcourir et prévisualiser tous les templates avec le rechargement automatique.

Personnaliser les templates

Les templates utilisent les composants React Email. Voici un exemple :

// packages/emails/src/templates/welcome.tsx
import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Text,
} from "@react-email/components";
import { Header } from "../components/header";
import { Footer } from "../components/footer";

interface WelcomeEmailProps {
  name: string;
}

export default function WelcomeEmail({ name }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to ScaleRocket, {name}!</Preview>
      <Body style={main}>
        <Container style={container}>
          <Header />
          <Heading style={h1}>Welcome aboard, {name}!</Heading>
          <Text style={text}>
            Thanks for signing up. You are all set to start using ScaleRocket.
          </Text>
          <Footer />
        </Container>
      </Body>
    </Html>
  );
}

const main = { backgroundColor: "#f6f9fc", fontFamily: "sans-serif" };
const container = { margin: "0 auto", padding: "40px 20px", maxWidth: "560px" };
const h1 = { fontSize: "24px", fontWeight: "bold", margin: "30px 0" };
const text = { fontSize: "16px", lineHeight: "26px", color: "#333" };

Envoyer des emails

ScaleRocket fournit une fonction utilitaire pour l'envoi d'emails :

// packages/emails/src/send.ts
import { Resend } from "resend";

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

export async function sendEmail({
  to,
  subject,
  react,
}: {
  to: string;
  subject: string;
  react: React.ReactElement;
}) {
  const { data, error } = await resend.emails.send({
    from: "ScaleRocket <hello@yourdomain.com>",
    to,
    subject,
    react,
  });

  if (error) throw error;
  return data;
}

Utilisez-la dans vos Edge Functions ou routes API :

import { sendEmail } from "@saas/emails";
import WelcomeEmail from "@saas/emails/templates/welcome";

await sendEmail({
  to: user.email,
  subject: "Welcome to ScaleRocket!",
  react: WelcomeEmail({ name: user.name }),
});

Tester l'envoi

Démarrez le serveur de développement : pnpm dev
Inscrivez-vous avec une vraie adresse email
Vérifiez votre boîte de réception pour l'email de bienvenue
Vérifiez le tableau de bord Resend sous Emails pour voir les logs de livraison

Note : En développement, Resend peut livrer les emails lentement dans votre boîte de réception. Vérifiez le tableau de bord Resend pour un statut de livraison instantané et d'éventuelles erreurs.

Checklist de production

Vérifiez votre domaine d'envoi
Mettez à jour l'adresse from dans packages/emails/src/send.ts
Définissez RESEND_API_KEY dans votre environnement de production
Testez tous les templates d'email en déclenchant chaque flux

Prochaines étapes

Configurer l'authentification — les emails sont envoyés lors de l'inscription et de la réinitialisation du mot de passe
Configurer Stripe — emails de paiement lors des événements d'abonnement

Fini ? Marquez cette page comme terminée.

Configuration des emails

On this page