Comment envoyer des e-mails avec React Email

Les clients de messagerie rejettent les mises en page CSS modernes en flexbox et en grille, ce qui oblige les développeurs à écrire à la main des tableaux HTML imbriqués et des styles en ligne. React Email compile des composants JSX en un balisage à base de tableaux qui s'affiche de façon cohérente dans Gmail, Outlook et Apple Mail.

Comment construire un modèle d'e-mail ?

Installez les paquets :

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

Les composants correspondent à du HTML compatible avec les clients de messagerie et gèrent pour vous les styles en ligne et les mises en page en tableaux. Un modèle de reçu simple, acceptant des props pour pouvoir le réutiliser :

// emails/Receipt.tsx
import { Html, Head, Body, Container, Heading, Text } from "@react-email/components";

type ReceiptProps = {
  name: string;
  total: string;
};

export function Receipt({ name, total }: ReceiptProps) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "sans-serif" }}>
        <Container>
          <Heading>Thanks, {name}</Heading>
          <Text>Your order total was {total}.</Text>
        </Container>
      </Body>
    </Html>
  );
}

Comme il s'agit simplement de React, vous composez, bouclez et passez des props comme vous le feriez dans n'importe quel composant, puis vous prévisualisez le résultat localement avant tout envoi.

Comment transformer le composant en HTML ?

render() prend l'élément et renvoie une chaîne HTML. La fonction peut aussi produire une version en texte brut, que vous devriez inclure comme alternative textuelle :

import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";

const html = await render(<Receipt name="Alex" total="$42.00" />);
const text = await render(<Receipt name="Alex" total="$42.00" />, {
  plainText: true,
});

À ce stade, vous disposez d'une chaîne HTML. Le travail de React Email est terminé. Rien n'a encore été envoyé ; vous avez besoin d'un fournisseur pour cela.

Envoyer avec Bird

Passez le HTML généré directement dans l'API e-mail de Bird. La sortie du composant devient le champ html :

import { BirdClient } from "@messagebird/sdk";
import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";

const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });

const html = await render(<Receipt name="Alex" total="$42.00" />);

const { data, error } = await bird.email.send({
  from:    "onboarding@messagebird.dev",
  to:      ["delivered@messagebird.dev"],
  subject: "Your receipt",
  html,
}).safe();

L'expéditeur onboarding@messagebird.dev et l'adresse sandbox delivered@messagebird.dev permettent de vérifier à la fois le modèle généré et l'envoi en une seule exécution. La même sortie render() fonctionne dans des fonctions Vercel ou via SMTP avec Nodemailer.

FAQ

Est-ce que React Email envoie l'e-mail ?

Non. Il construit le modèle et le transforme en HTML et en texte brut. L'envoi est une étape séparée, prise en charge par un fournisseur tel qu'un serveur SMTP ou une API d'e-mail.

Pourquoi utiliser React Email au lieu d'écrire du HTML à la main ?

Le HTML d'e-mail doit fonctionner sur des clients qui prennent en charge des sous-ensembles très différents de CSS, ce qui impose généralement des tableaux imbriqués et des styles en ligne. Les composants de React Email produisent ce balisage pour vous : vous écrivez des composants et obtenez une sortie compatible avec les clients de messagerie.

Puis-je réutiliser un modèle avec des données différentes ?

Oui. Les modèles sont des composants React, ils acceptent donc des props. Générez le même composant avec des valeurs différentes pour chaque destinataire, puis envoyez chaque résultat.

React Email et une API d'envoi se partagent le travail de manière claire : l'un met en forme le message, l'autre le distribue. Pour une gestion des modèles côté envoi, consultez les modèles d'e-mails Bird.