# Next.js : envoyer un email gratuit, SMS et WhatsApp, le piège ? > L'offre gratuite de Resend s'arrête à 100 emails par jour et Twilio facture chaque SMS. Un helper serveur envoie email, SMS et WhatsApp depuis Next.js. Source: https://unlimitedmessaging.app/fr/articles/nextjs-transactional-email-sms-free Guide Next.js # Email, SMS et WhatsApp depuis Next.js, _en une seule fonction serveur._ Un fichier helper, appelé depuis une Server Action ou un Route Handler, envoie l'email de bienvenue, le SMS de commande ou le rappel WhatsApp depuis votre boîte mail, votre téléphone et votre numéro. Pas de code SMTP, pas de frais par message, et la clé n'atteint jamais le navigateur. [Obtenir une clé API gratuite](https://app.unlimitedmessaging.app)[Voir l'API](https://unlimitedmessaging.app/fr/api) La réponse courte ## Comment envoyer email, SMS et WhatsApp depuis Next.js gratuitement ? Placez un helper côté serveur dans lib/notify.ts qui appelle POST /message sur Unlimited Messaging, puis appelez-le depuis une [Server Action](https://nextjs.org/docs/app/getting-started/mutating-data) ou un Route Handler. La même requête envoie l'email depuis votre boîte mail, le SMS depuis votre téléphone Android et le WhatsApp depuis votre numéro, et le plan Free ne facture rien au message. Le montage habituel, c'est un service par canal. Nodemailer est gratuit mais ne parle que SMTP, exige le runtime Node.js et vous laisse au plafond de votre boîte, 500 emails par jour sur Gmail. Une API email comme Resend est gratuite jusqu'à 3 000 emails par mois et 100 par jour. Le SMS via Twilio est facturé au segment après l'essai, qui ne joint que 5 numéros vérifiés. WhatsApp fait une quatrième intégration. Next.js vous donne déjà les deux points d'entrée serveur nécessaires. Une Server Action gère vos formulaires (inscription, paiement), un Route Handler sert les autres appelants (une tâche cron, un worker, un autre service). Les deux tournent sur le serveur, où les variables d'environnement sans préfixe NEXT\_PUBLIC\_ restent hors du bundle navigateur. Depuis Next.js 15.1, after() est stable : il exécute du code une fois la réponse envoyée, l'utilisateur n'attend donc jamais le départ d'un email ou d'un SMS. À lire aussi : [le SDK TypeScript en détail](https://unlimitedmessaging.app/fr/articles/typescript-sdk), et [connecter une boîte Gmail avec un mot de passe d'application](https://unlimitedmessaging.app/fr/articles/gmail-imap-smtp-app-password). ![Illustration : une requête JSON vers POST /message qui répond 201, avec le titre « Email, SMS et WhatsApp depuis Next.js ».](https://unlimitedmessaging.app/_next/image?url=%2Fassets%2Farticles%2Fcovers%2Fnextjs-transactional-email-sms-free-fr.png&w=3840&q=75) Définition Server Action Une fonction async marquée 'use server' qui s'exécute sur le serveur et qu'un formulaire ou un composant client appelle par une requête POST. Elle peut lire des variables d'environnement qui n'atteignent jamais le navigateur. Aussi appelée Server Function. Accessible par un POST direct : elle vérifie ses entrées et l'authentification comme n'importe quel endpoint. [Source : Next.js Docs, Mutating Data↗](https://nextjs.org/docs/app/getting-started/mutating-data) Pas à pas ## Comment l'ajouter à une app Next.js, étape par étape ? Cinq étapes, App Router, environ 10 minutes. Il vous faut un compte Unlimited Messaging gratuit avec au moins un canal connecté. 1. 01 ### Gardez la clé côté serveur Connectez votre boîte mail, votre numéro WhatsApp ou l'application Android dans Unlimited Messaging, créez une clé API et placez-la dans .env.local sans préfixe NEXT\_PUBLIC\_. Next.js n'intègre au bundle navigateur que les variables NEXT\_PUBLIC\_ ; les autres restent sur le serveur. .env.local.env.local ``` # .env.local (gitignored by create-next-app) # No NEXT_PUBLIC_ prefix: the key stays on the server UM_API_KEY=um_live_xxxx # Only for the internal route handler of step 4 INTERNAL_SECRET=change-me-to-a-long-random-string ``` 2. 02 ### Écrivez un helper réservé au serveur lib/notify.ts enveloppe POST /message. import 'server-only' fait échouer le build si un composant client l'importe, la clé ne peut donc pas fuiter par erreur. Il retire les canaux sans destinataire et marque le message comme transactionnel. lib/notify.tsTypeScript ``` // lib/notify.ts import 'server-only'; // the build fails if a client component imports this file export type Channel = 'EMAIL' | 'WHATSAPP' | 'SMS'; export async function notify(input: { email?: string; phone?: string; // E.164, e.g. +33612345678 channels: Channel[]; subject: string; text: string; }) { // Drop the channels that have no destination const channels = input.channels .filter((c) => (c === 'EMAIL' ? input.email : input.phone)) .map((channel) => ({ channel })); if (channels.length === 0) return null; const res = await fetch('https://api.unlimitedmessaging.app/message', { method: 'POST', headers: { Authorization: `Bearer ${process.env.UM_API_KEY}`, 'Content-Type': 'application/json', }, body: JSON.stringify({ to: { email: input.email, phone: input.phone }, channels, subject: input.subject, text: input.text, priority: 'transactional', }), }); if (!res.ok) throw new Error(`Unlimited Messaging ${res.status}: ${await res.text()}`); return res.json(); // { dispatchId, messages: [...] } } ``` 3. 03 ### Appelez-le depuis une Server Action À l'inscription, envoyez l'email et le WhatsApp de bienvenue dans after() : le formulaire répond tout de suite et le message part juste après. Une Server Action est accessible par n'importe quel POST : validez les entrées et limitez le débit comme pour un endpoint public. app/signup/actions.tsServer Action ``` // app/signup/actions.ts 'use server'; import { after } from 'next/server'; import { notify } from '@/lib/notify'; export async function signUp(formData: FormData) { const email = String(formData.get('email')); const phone = String(formData.get('phone') ?? '') || undefined; // ...validate the input, rate limit, create the user // Runs after the response is sent: the form never waits for the message after(() => notify({ email, phone, channels: ['EMAIL', 'WHATSAPP'], subject: 'Welcome to Acme', text: 'Your account is ready. Reply to this message if you need help.', }).catch(console.error), ); } ``` 4. 04 ### Ou depuis un Route Handler Pour les appelants hors de vos formulaires, une tâche cron, un worker, un autre service, exposez un Route Handler protégé par un secret partagé. Ici il envoie un email et un SMS depuis votre téléphone Android. app/api/notify/route.tsRoute Handler ``` // app/api/notify/route.ts import { notify } from '@/lib/notify'; export async function POST(req: Request) { // For your own jobs and services only, never a public endpoint if (req.headers.get('authorization') !== `Bearer ${process.env.INTERNAL_SECRET}`) { return new Response('Unauthorized', { status: 401 }); } const { email, phone, subject, text } = await req.json(); const result = await notify({ email, phone, channels: ['EMAIL', 'SMS'], subject, text }); return Response.json(result); } ``` 5. 05 ### Testez Lancez next dev et appelez la route. La réponse liste un message par canal avec son propre statut, regroupés par un dispatchId, et les messages apparaissent dans votre boîte de réception Unlimited Messaging. Terminalcurl ``` curl -X POST http://localhost:3000/api/notify \ -H "Authorization: Bearer $INTERNAL_SECRET" \ -H "Content-Type: application/json" \ -d '{"email":"lea@example.com","phone":"+33612345678", "subject":"Order #1042 shipped","text":"Your order #1042 is on its way."}' ``` Vibe coding ## Vous codez avec Cursor, v0 ou Claude Code ? Collez ce prompt Le prompt donne à votre éditeur IA le bon schéma : un helper réservé au serveur, la clé hors NEXT\_PUBLIC\_, after() pour la rapidité. Il vous demande vos contacts de test avant tout envoi. Prompt à copier Ajoute l'envoi de messages transactionnels à ce projet Next.js (App Router) avec Unlimited Messaging : email, SMS et WhatsApp envoyés depuis mes propres comptes. 1. Ajoute UM_API_KEY dans .env.local et .env.example. N'utilise jamais de préfixe NEXT_PUBLIC_ et ne lis jamais la clé dans un composant client. 2. Crée lib/notify.ts qui commence par import 'server-only'. Exporte notify({ email, phone, channels, subject, text }) qui envoie un POST https://api.unlimitedmessaging.app/message avec l'en-tête Authorization: Bearer UM_API_KEY et le JSON { to: { email, phone }, channels: [{ channel: 'EMAIL' | 'WHATSAPP' | 'SMS' }], subject, text, priority: 'transactional' }. Ignore les canaux sans destinataire ; les numéros sont au format E.164. 3. Appelle notify depuis ma Server Action d'inscription dans after() de next/server, pour que le formulaire n'attende pas. Valide les entrées et garde les vérifications d'authentification existantes. 4. Ajoute un Route Handler app/api/notify/route.ts protégé par Authorization: Bearer INTERNAL_SECRET pour mes tâches cron. 5. Référence de l'API : https://docs.unlimitedmessaging.app. Je crée la clé API sur https://app.unlimitedmessaging.app. Montre-moi le diff, puis demande-moi mon email et mon numéro de test avant d'envoyer quoi que ce soit. Les options ## Nodemailer, Resend, Twilio ou une seule API : quoi choisir pour Next.js ? Quatre façons courantes d'envoyer des messages transactionnels depuis Next.js, comparées sur ce qu'elles envoient, ce qui est gratuit et ce que vous maintenez. __Nodemailer, Resend, Twilio ou une seule API : quoi choisir pour Next.js ?__ | [Nodemailer + Gmail](https://nodemailer.com)Bibliothèque SMTP | [Resend](https://resend.com/pricing)API email | [Twilio](https://www.twilio.com/en-us/sms/pricing)API SMS et WhatsApp | Unlimited MessagingEmail, WhatsApp et SMS | | | ------------------------------------------------------------- | ----------------------------------------------------------- | --------------------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------------------- | | Canaux | Email | Email | SMS et WhatsApp, facturés au message | Email, WhatsApp et SMS en une requête | | Gratuit | Bibliothèque gratuite, Gmail plafonne à 500 emails par jour | 3 000 emails par mois, 100 par jour | Essai : 5 numéros vérifiés au maximum | Plan Free sans frais par message | | Runtime | Node.js uniquement (sockets SMTP) | Tout runtime (HTTP) | Tout runtime (HTTP) | Tout runtime (HTTP) | | Expéditeur | Votre boîte mail | Votre domaine vérifié | Un numéro Twilio ou un expéditeur WhatsApp enregistré | Votre boîte mail, votre numéro WhatsApp et votre téléphone | | À maintenir | Réglages SMTP, erreurs, nouvelles tentatives | Un SDK, des enregistrements DNS | Un SDK par produit, modèles Meta pour WhatsApp | Un seul fetch pour tous les canaux | | Idéal pour | Quelques emails depuis votre boîte | L'email en gros volume | Le SMS en volume, le WhatsApp officiel | Les messages d'une app un par un, gratuit pendant la croissance | Vérifié le 9 novembre 2026 sur nodemailer.com, resend.com/pricing, la documentation d'essai de Twilio et l'aide Gmail (liens dans les sources). Les offres gratuites changent : suivez les liens avant de construire dessus. Les contreparties ## Quelles sont les limites ? Gratuit supprime la facture au message et le code SMTP. Pas la sécurité, les règles de WhatsApp ni le rythme d'un téléphone. 1. 01 ### Une action publique peut être détournée Une action d'inscription qui envoie des messages permet à n'importe qui de déclencher un WhatsApp ou un SMS vers n'importe quel numéro. Ajoutez un captcha ou une limite de débit, et n'écrivez à un numéro qu'une fois qu'il est fiable. 2. 02 ### WhatsApp est non officiel, et le spam fait bannir les numéros Votre numéro est lié comme un appareil, hors de la plateforme Business de Meta. Les messages demandés par l'utilisateur sont peu risqués ; des envois en masse à des inconnus peuvent faire bannir le numéro. Gardez WhatsApp pour le transactionnel. 3. 03 ### Le SMS va au rythme d'un téléphone Les SMS partent de la SIM de votre téléphone Android, sur votre forfait. Android demande une confirmation au-delà de 30 SMS en 30 minutes, l'application espace donc les envois à environ 30 toutes les 30 minutes, et le téléphone doit rester allumé. 4. 04 ### L'email suit les limites de votre boîte mail Les emails partent de votre boîte en SMTP, son plafond quotidien s'applique donc : 500 par jour sur un compte Gmail. Pour une newsletter, prenez un service d'emailing. 5. 05 ### Les messages du plan Free portent une signature Sur le plan Free, les messages se terminent par une courte ligne "Sent with UnlimitedMessaging.app", et les médias et les webhooks sont payants. Medium et Max retirent la ligne. 6. 06 ### after() n'est pas une file d'attente Si l'appel échoue après l'envoi de la réponse, rien ne le relance. Pour un reçu qu'il ne faut pas perdre, enregistrez la tâche en base ou dans une file et relancez depuis là. Quand choisir autre chose ### Gros volume, tableaux de délivrabilité, WhatsApp officiel ? Si vous envoyez des dizaines de milliers d'emails par mois et avez besoin de statistiques de délivrabilité, Resend ou Postmark sont faits pour ça. Pour la plateforme WhatsApp Business officielle de Meta ou des numéros courts, passez par Twilio. Unlimited Messaging convient à un SaaS Next.js qui envoie inscriptions, commandes et rappels depuis ses propres comptes, gratuitement pendant qu'il teste et grandit. FAQ ## Questions sur l'envoi de messages depuis Next.js Appelez une API email depuis du code serveur, une Server Action ou un Route Handler. Avec Unlimited Messaging, l'email part de votre propre boîte (Gmail, votre domaine) sans frais par message sur le plan Free. Nodemailer est gratuit aussi, mais email uniquement et runtime Node.js uniquement. Une API HTTP : elle tourne dans tous les runtimes, Edge compris, sans code SMTP. Avec Unlimited Messaging, le même appel envoie aussi SMS et WhatsApp. Envoyez POST /message avec le canal SMS depuis un Route Handler ou une Server Action. Le SMS part de la SIM de votre téléphone Android via l'application gratuite, sur votre forfait. Une Server Action pour vos propres formulaires et boutons, un Route Handler pour tout ce qui appelle votre app en HTTP (cron, webhooks, autre service). Les deux peuvent appeler le même lib/notify.ts. Dans .env.local en local et dans les variables d'environnement de votre hébergeur en production, sans préfixe NEXT\_PUBLIC\_. Lisez-la uniquement côté serveur ; import 'server-only' protège le helper. Oui, c'est une simple requête HTTPS. after() fonctionne sur Vercel, sur un serveur Node.js et dans Docker. Un export statique n'a pas de serveur, il ne peut donc pas envoyer. Oui : npm i @unlimited-messaging/sdk, puis new UnlimitedMessagingApiClient({ token }) et client.messages.messageSend(...). Ce guide utilise fetch pour garder l'exemple sans dépendance. Sources ## Sources & références Pour vérifier par vous-même les informations de cet article : 1. [01Mutating Data (Server Functions et Server Actions)↗Next.js Docs](https://nextjs.org/docs/app/getting-started/mutating-data) 2. [02after (stable depuis la v15.1.0)↗Next.js Docs](https://nextjs.org/docs/app/api-reference/functions/after) 3. [03How to use environment variables in Next.js↗Next.js Docs](https://nextjs.org/docs/app/guides/environment-variables) 4. [04Server and Client Components (server-only)↗Next.js Docs](https://nextjs.org/docs/app/getting-started/server-and-client-components) 5. [05Nodemailer↗nodemailer.com](https://nodemailer.com) 6. [06Pricing (Free : 3 000 emails par mois, 100 par jour)↗Resend](https://resend.com/pricing) 7. [07How to use your free trial account (Messaging)↗Twilio Docs](https://www.twilio.com/docs/messaging/guides/how-to-use-your-free-trial-account) 8. [08Limites d'envoi et de réception (500 emails par jour)↗Aide Gmail](https://support.google.com/mail/answer/22839?hl=fr) 9. [09SmsUsageMonitor (seuil de 30 SMS en 30 minutes)↗Android Open Source Project](https://android.googlesource.com/platform/frameworks/opt/telephony/+/refs/heads/main/src/java/com/android/internal/telephony/SmsUsageMonitor.java) 10. [10Référence de l'API : POST /message↗Unlimited Messaging Docs](https://docs.unlimitedmessaging.app) ![Ilian, ingénieur logiciel senior](https://ilianazz.com/images/iliazz.png) Écrit par [Ilian](https://unlimitedmessaging.app/fr/authors/ilian) · Senior Software Engineer Ingénieur logiciel senior, il fonde et dirige plusieurs sociétés tech. Il conçoit des produits autour des API de messagerie, de l’automatisation et de l’intégration de l’IA, et partage ici ce qu’il apprend en construisant. [Voir le profil LinkedIn↗](https://www.linkedin.com/in/ilianAzz/)Mis à jour le 9 novembre 2026 ![](https://unlimitedmessaging.app/assets/logos/whatsapp.svg)![](https://unlimitedmessaging.app/assets/logos/email.svg)![](https://unlimitedmessaging.app/assets/logos/sms.svg) ## Ajoutez email, SMS et WhatsApp à votre app Next.js aujourd'hui. Créez un compte gratuit, connectez une boîte mail, un numéro WhatsApp ou un téléphone Android, collez le helper. Sans carte bancaire, sans frais par message. [Commencer gratuitement→](https://app.unlimitedmessaging.app) Articles similaires * [![](https://unlimitedmessaging.app/_next/image?url=%2Fassets%2Farticles%2Fcovers%2Ftypescript-sdk-fr.png&w=3840&q=75)Envoyer des WhatsApp depuis Node.js avec un SDK typéPackage npm entièrement typé pour Node.js, Next.js et tout environnement JS.](https://unlimitedmessaging.app/fr/articles/typescript-sdk) * [![](https://unlimitedmessaging.app/_next/image?url=%2Fassets%2Farticles%2Fcovers%2Femail-whatsapp-single-api-request-fr.png&w=3840&q=75)Une requête API, deux canaux : email et WhatsApp d'un coupEnvoyez le même message par WhatsApp et par mail en un appel, depuis votre numéro et votre boîte mail, gratuit sur toutes les offres.](https://unlimitedmessaging.app/fr/articles/email-whatsapp-single-api-request) * [![](https://unlimitedmessaging.app/_next/image?url=%2Fassets%2Farticles%2Fcovers%2Ffree-sms-api-fr.png&w=3840&q=75)API SMS gratuite : ce qui est gratuit, et ce qui n'est qu'un essaiFreeEssai Twilio, clé gratuite Textbelt et passerelles Android qui envoient sur votre forfait : le comparatif honnête.](https://unlimitedmessaging.app/fr/articles/free-sms-api)