Avec la croissance rapide des plateformes de marketing par email, intégrer un système de newsletter performant est devenu un avantage majeur pour améliorer l’engagement des utilisateurs. React Email est une solution efficace permettant de gérer l’inscription par email directement dans les applications React. Dans cet article, nous allons explorer ce qu’est React Email, pourquoi il est performant pour les formulaires de contact et d’inscription, et comment l’utiliser pour créer une inscription à une newsletter. De plus, nous ajouterons une confirmation par email à l’aide de Nodemailer.

Qu’est-ce que React Email ?

React Email est une bibliothèque facilitant la gestion d’emails transactionnels dans les applications React. Contrairement à d’autres solutions, elle s’intègre directement avec les composants React pour un flux de travail fluide. Grâce à React Email, les développeurs peuvent envoyer des emails personnalisés, gérer les modèles d’emails et, surtout, créer des formulaires d’inscription et de confirmation en quelques étapes simples. Cette bibliothèque est idéale pour les projets nécessitant des formulaires de contact ou d’inscription à des newsletters.

Pourquoi Utiliser React Email ?

Les avantages de React Email sont nombreux, surtout lorsqu’il s’agit d’automatiser la gestion des emails dans une application. En effet, cette solution permet de:

  • Une intégration facile : La bibliothèque s’intègre rapidement avec React et des frameworks populaires comme Next.js.
  • Une personnalisation des modèles : Grâce à des composants React, on peut créer des emails attractifs.
  • Un support optimal de Nodemailer : La compatibilité avec Nodemailer garantit un envoi d’email optimisé.

Les Avantages de React Email 

Utiliser React Email avec Nodemailer pour gérer les emails transactionnels offre de nombreux bénéfices. En plus d’une gestion simplifiée des inscriptions, cette approche permet de :

  1. Optimiser l’engagement des utilisateurs : Un formulaire d’inscription personnalisé encourage les utilisateurs à s’abonner.
  2. Automatiser l’envoi d’emails : Des emails de confirmation peuvent être envoyés automatiquement pour valider les inscriptions.
  3. Améliorer la sécurité : Les adresses email sont validées via un lien de confirmation, réduisant les inscriptions frauduleuses

Étapes pour Implémenter un Système de Newsletter avec React et Nodemailer

Voyons maintenant comment implémenter cette fonctionnalité avec React et Nodemailer. Voici le code clé et les étapes d’intégration.

1. Création du Formulaire d’Inscription

Le formulaire d’inscription est l’interface principale où l’utilisateur entre son email. Le code suivant permet d’afficher le formulaire et de gérer l’envoi de l’adresse email pour l’inscription.

"use client";
import React, { useState } from "react";interface SignupFormProps {
onSubmit: (email: string) => void;
}const ContactForm: React.FC<SignupFormProps> = ({ onSubmit }) => {
const [email, setEmail] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const [message, setMessage] = useState("");const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (email) {
setIsSubmitting(true); // Indique que le formulaire est en cours de soumission
onSubmit(email);
setEmail(""); // Efface l'input après soumission
setMessage("Veuillez vérifier vos e-mails pour confirmer votre inscription."); // Affiche le message
}
};return (
<form onSubmit={handleSubmit} className="w-[500px] mx-auto p-4 bg-white shadow-md rounded">
<h2 className="text-xl font-bold mb-4">Newsletter</h2>
<div className="mb-4">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
Email
</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<button
type="submit"
disabled={isSubmitting} // Désactiver le bouton si le formulaire est en cours de soumission
className={`w-full ${isSubmitting ? 'bg-gray-400' : 'bg-indigo-600 hover:bg-indigo-700'} text-white py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`}
>
S'inscrire
</button>
{message && <p className="mt-4 text-green-600 text-center">{message}</p>} {/* Affiche le message si présent */}
</form>
);
};export default ContactForm;
  • Explication du code : Ce formulaire permet à l’utilisateur d’entrer son email et de le soumettre. Lors de la soumission, le formulaire désactive le bouton pour éviter les envois multiples et affiche un message de confirmation.

2. Intégration du Formulaire dans la Page d’Accueil

Pour utiliser le formulaire dans votre page, importez et utilisez le composant ContactForm dans la page d’accueil.

"use client";
import ContactForm from "@/app/components/ContactForm";export default function Home() {const handleFormSubmit = async (email: string) => {
try {
const response = await fetch('/api/sendEmail', {
method: 'POST', // Assurez-vous que c'est bien un POST
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email }),
});
if (response.ok) {
console.log('Email sent successfully');
} else {
console.error('Failed to send email');
}
} catch (error) {
console.error('Error sending email:', error);
}
};
return (
<div className="h-screen w-full flex items-center justify-center">
<ContactForm onSubmit={handleFormSubmit} />
</div>
);
}

Ici, la fonction handleFormSubmit envoie une requête POST à l’API pour envoyer un email. Cette approche garantit que le formulaire reste dans un état de soumission unique, en évitant les doublons.

3. Configuration de l’API pour l’Envoi de l’Email avec Nodemailer

Pour l’envoi de l’email de confirmation, configurez une route API qui utilise Nodemailer. Ce dernier envoie l’email en utilisant un service de messagerie. Voici le code de cette API :

import { NextResponse } from 'next/server';
import nodemailer from 'nodemailer';
import { render } from '@react-email/render';
import EmailTemplate from '@/app/components/EmailTemplate';
import { ReactElement } from 'react';export async function POST(request: Request) {
try {
const { email } = await request.json();const transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: process.env.GMAIL_USER,
pass: process.env.GMAIL_PASS,
},
});const emailHtml = await render(EmailTemplate({ email }) as ReactElement);await transporter.sendMail({
from: process.env.GMAIL_USER,
to: email,
subject: 'Confirmer votre inscription',
html: emailHtml,
});return NextResponse.json({ message: 'Email sent successfully' }, { status: 200 });
} catch (error) {
console.error('Error sending email:', error);
return NextResponse.json({ message: 'Error sending email', error }, { status: 500 });
}
}
  • Explication du code : Ce code initialise Nodemailer avec les informations d’authentification Gmail et utilise le modèle EmailTemplate pour personnaliser le message. L’API répond avec un message de succès ou d’erreur en fonction de l’état de l’envoi.

4. Création du Template d’Email avec React Email

Le composant EmailTemplate personnalise le contenu de l’email. Voici un exemple de template simple :

import * as React from 'react';
import { Html, Head, Preview, Body, Container, Heading, Text, Link } from '@react-email/components';interface EmailTemplateProps {
email: string;
}const EmailTemplate: React.FC<EmailTemplateProps> = ({ email }) => {
return (
<Html>
<Head />
<Preview>Confirmez votre abonnement à notre newsletter</Preview>
<Body className="bg-gray-100 text-gray-900">
<Container className="bg-white rounded-lg shadow p-6">
<Heading className="text-xl font-bold mb-4">Bienvenue dans notre newsletter !</Heading>
<Text className="mb-4">Bonjour, merci de vous être inscrit !</Text>
<Text className="mb-4">Veuillez confirmer votre abonnement en cliquant sur le lien ci-dessous :</Text>
<Link href={`http://localhost:3000/confirm?email=${email}`} className="text-blue-500 underline">
Confirmer mon inscription
</Link>
</Container>
</Body>
</Html>
);
};export default EmailTemplate;

Ce modèle d’email crée un message de confirmation clair, incitant l’utilisateur à confirmer son abonnement par un lien.

Conclusion

React Email et Nodemailer offrent une solution performante pour gérer les inscriptions par email dans une application React. Utiliser cette approche aide à renforcer la sécurité et à automatiser la gestion des abonnements à la newsletter.

Pour approfondir vos connaissances en React et maîtriser ces nouvelles fonctionnalités, n’hésitez pas à rejoindre ma formation dédiée à React JS, où vous apprendrez à créer des applications performantes et réactives.

Newsletter

Vous souhaitez maîtriser les langages et outils du web ? Ne manquez aucune opportunité avec nos tutoriels, astuces et offres exclusives ! Inscrivez-vous dès maintenant pour recevoir des contenus de qualité, soigneusement sélectionnés pour vous, et boostez vos compétences. En vous inscrivant, vous recevrez une formation offerte ! 

Confirmez votre inscription via l'email qui vient de vous être envoyé. Vérifiez vos spams.