Modèles d'e-mails React : créez de superbes e-mails transactionnels
Les e-mails transactionnels ont un taux d'ouverture de 45 %, soit près de 5 fois celui des e-mails marketing moyens, mais la plupart des entreprises envoient des e-mails HTML mal formatés qui nuisent à la perception de la marque. React Email apporte le modèle de développement basé sur les composants à la conception des e-mails, permettant aux développeurs de créer de superbes modèles réactifs avec des modèles React familiers.
Points clés à retenir
- Les composants React Email se compilent en HTML compatible entre clients - Gmail, Outlook, Apple Mail
- L'architecture basée sur les composants permet des en-têtes, des pieds de page et des modèles de mise en page réutilisables
- Le serveur de prévisualisation local avec rechargement à chaud accélère le développement de modèles
- Exporter les fonctions de rendu (pas les composants bruts) pour une intégration transparente de NestJS
Why React Email
Le courrier électronique HTML est notoirement difficile. Différents clients affichent le HTML différemment : Outlook utilise Word comme moteur de rendu, Gmail supprime les balises de style et les clients mobiles varient dans la gestion des fenêtres.
React Email résume cela avec des composants prédéfinis : conteneur (largeur réactive), section (blocs basés sur une table), ligne/colonne (système de grille), texte, en-tête, bouton (fonctionne dans Outlook), image, lien, HR et aperçu (texte masqué de la boîte de réception).
Configuration du projet
Installez @react-email/components et réagissez-email. Organisez les modèles dans un répertoire packages/email-templates avec templates/, composants/ et un fichier render.ts qui exporte les fonctions de rendu.
Modèles de construction
Composants de mise en page partagés
Créez des composants EmailHeader et EmailFooter réutilisables avec votre marque. Ceux-ci garantissent la cohérence de tous les e-mails transactionnels.
Structure du modèle
Chaque modèle d'e-mail est un composant React recevant des accessoires tapés :
import {
Html, Head, Body, Container, Section,
Text, Button, Hr,
} from "@react-email/components";
interface WelcomeEmailProps {
userName: string;
loginUrl: string;
}
export function WelcomeEmail({ userName, loginUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "Arial, sans-serif" }}>
<Container style={{ maxWidth: "600px", margin: "0 auto" }}>
<Text>Hi {userName},</Text>
<Text>Your account is ready.</Text>
<Button
href={loginUrl}
style={{ background: "#001834", color: "#fff", padding: "12px 24px" }}
>
Sign In
</Button>
</Container>
</Body>
</Html>
);
}
Rendu pour l'intégration NestJS
Le modèle critique : exporter les fonctions de rendu, pas les composants bruts. NestJS s'exécute sans compilation JSX, donc l'importation de composants React provoque directement des erreurs.
Créez un fichier render.ts qui importe des modèles et exporte des fonctions asynchrones :
import { render } from "@react-email/render";
import { WelcomeEmail } from "./templates/welcome";
export async function renderWelcomeEmail(props: {
userName: string;
loginUrl: string;
}) {
return render(WelcomeEmail(props));
}
Dans NestJS, appelez la fonction de rendu pour obtenir du HTML, puis envoyez-le via votre transporteur de messagerie.
Flux de travail de développement
Aperçu local
Exécutez npx react-email dev pour un aperçu basé sur un navigateur avec rechargement à chaud. Les modifications apparaissent instantanément, ce qui accélère les itérations.
Tests multi-clients
Testez sur plusieurs clients en utilisant Litmus ou Email on Acid. Au minimum : Gmail (Chrome), Outlook (Windows), Apple Mail, Gmail (iOS), Apple Mail (iOS), Yahoo Mail et Outlook.com.
Meilleures pratiques en matière de style
- Styles en ligne uniquement : styles en ligne de React Email automatiquement pour la compatibilité client
- Polices système : utilisez Arial, Georgia, Verdana. Les polices personnalisées ont une prise en charge limitée.
- Largeur maximale de 600 px : largeur d'e-mail standard pour ordinateur et mobile
- Mise en page basée sur des tableaux : les composants React Email s'affichent sous forme de tableaux pour la compatibilité avec Outlook
- Mode sombre : Inclut des balises méta pour la prise en charge du mode sombre d'Apple Mail et d'Outlook
Modèles d'e-mails courants
Confirmation de commande
Incluez le numéro de commande, la liste des articles avec les prix, l'adresse de livraison, la livraison estimée et le lien de suivi lorsqu'il est disponible. Utilisez une disposition de tableau pour la liste d’éléments.
Réinitialisation du mot de passe
Gardez-le au minimum : brève explication, bouton de réinitialisation bien visible avec lien limité dans le temps, avis de sécurité concernant le non-partage du lien et contact d'assistance.
E-mail de facturation
Joignez la facture PDF et incluez un résumé dans le corps de l'e-mail : numéro de facture, date, date d'échéance, montant total et un bouton pour consulter/payer en ligne.
Notification d'expédition
Incluez le numéro de commande, le nom du transporteur, le numéro de suivi avec lien cliquable, la date de livraison estimée et les articles expédiés.
Questions fréquemment posées
Q : Pourquoi ne pas utiliser un outil de création d'e-mails par glisser-déposer ?
Les générateurs de glisser-déposer fonctionnent pour les e-mails marketing mais manquent de capacités de contenu dynamique pour les e-mails transactionnels. Les confirmations de commande et les factures nécessitent des modèles basés sur les données que le code gère mieux.
Q : React Email fonctionne-t-il avec n'importe quel service d'envoi ?
Oui. Il génère des chaînes HTML standard compatibles avec Nodemailer, SendGrid, Postmark, AWS SES, Resend ou tout autre serveur SMTP.
Q : Comment gérons-nous la localisation des e-mails ?
Transmettez les paramètres régionaux et les chaînes traduites comme accessoires de modèle. The render function receives all text as parameters, so translations are handled by your i18n system before rendering.
Q : Pouvons-nous inclure des images ou des graphiques dynamiques ?
Utilisez des images générées côté serveur hébergées sur des URL. Les bibliothèques comme QuickChart affichent les graphiques sous forme d'images. Évitez les images intégrées : utilisez des URL hébergées pour des raisons de compatibilité.
Quelle est la prochaine étape
React Email transforme le développement de courriers électroniques transactionnels d'exercices frustrants de disposition de tableaux en flux de travail modernes basés sur des composants.
Contactez ECOSIRE pour le développement de modèles d'e-mail, ou explorez nos services de mise en œuvre Odoo pour des flux de travail de messagerie intégrés.
Publié par ECOSIRE – aider les entreprises à évoluer grâce à des solutions logicielles d'entreprise.
Rédigé par
ECOSIRE Research and Development Team
Création de produits numériques de niveau entreprise chez ECOSIRE. Partage d'analyses sur les intégrations Odoo, l'automatisation e-commerce et les solutions d'entreprise propulsées par l'IA.
Articles connexes
Création d'API avec Drizzle ORM et NestJS : guide complet
Créez des API de type sécurisé avec Drizzle ORM et NestJS. Apprenez la définition de schémas, les migrations, la création de requêtes, les relations, les transactions et les modèles de test pour les applications de production.
Internationalisation Next.js : Guide i18n complet avec next-intl
Implémentez l'internationalisation dans Next.js avec next-intl. Guide complet couvrant le routage, les traductions, les composants serveur/client, la prise en charge RTL, le référencement et le déploiement.