Mettre son site Next.js en ligne sans facture serveur
MAJ du 12 avril 2026
Votre site est fini, testé, parfait sur votre écran. Et personne ne le verra, parce que la mise en ligne reste le mur invisible : un devis d'agence à quatre chiffres, un tutoriel serveur qui finit en erreur, et la peur d'une facture mensuelle qui ne s'arrête jamais.
Cette masterclass vous fait franchir ce mur en moins d'une heure, à la main, sans serveur et sans payer un euro jusqu'à cent mille requêtes par jour : neuf étapes qui posent votre site Next.js sur Cloudflare Workers, et une seule commande pour le remettre à jour ensuite.
Ce que cet exercice ne peut pas casser
Aucune carte bancaire n'est demandée pour le plan Workers gratuit, et l'exercice se fait sur une feuille ou dans un fichier texte : vous ne touchez à rien qui tourne déjà. Au pire, vous jetez trois lignes et vous recommencez.
Ce que vous saurez faire à la fin
- Mettre un site Next.js en production sur Cloudflare Workers, gratuit jusqu'à cent mille requêtes par jour.
- Comprendre à quoi sert chaque pièce du déploiement, pour ne plus jamais copier une commande sans savoir ce qu'elle fait.
- Remettre votre site à jour en une seule commande après chaque modification.
- Diagnostiquer seul les trois erreurs de déploiement les plus fréquentes.
- Niveau membre· le prompt prêt à coller qui génère votre runbook de déploiement personnalisé, adapté à votre projet exact.
- Niveau Pro· mon fichier de configuration de production, la checklist post-déploiement que j'utilise sur asknadir.com, et un debug en direct quand vous coincez.
Du compte vide au site en ligne : chaque geste neutralise un doute précis.
Pourquoi cette méthode, et pourquoi neuf étapes
Next.js n'est pas un site statique : c'est une application qui a besoin de tourner quelque part. La plupart des hébergeurs vous facturent ce quelque part au mois. Cloudflare Workers renverse la logique : vous posez votre code sur un réseau de trois cents centres de données déjà allumés, et le palier gratuit couvre cent mille requêtes par jour. Le seul obstacle : Cloudflare ne comprend pas Next.js nativement. Il faut un traducteur, et c'est exactement ce que fait OpenNext. La méthode tient en neuf étapes, ni huit ni dix : chacune neutralise un doute précis qui bloque les débutants.
1Créer un compte Cloudflare : lever la peur de la carte bleuedoute : « et la facture cachée ? »
Allez sur cloudflare.com et créez un compte. Aucune carte bancaire n'est demandée pour le plan Workers gratuit, et c'est volontaire de le dire d'emblée : la première objection, c'est la facture cachée. Le plan gratuit inclut cent mille requêtes par jour. Vous avez maintenant un tableau de bord vide, prêt à recevoir votre site.
2Installer OpenNext et Wrangler : poser le traducteurdoute : « à quoi servent ces deux paquets ? »
Dans le dossier de votre projet, installez deux paquets en dépendances de développement (l'option save-dev de npm install) : @opennextjs/cloudflare et wrangler. OpenNext est l'adaptateur qui traduit le format Next.js en format Cloudflare. Wrangler est l'outil en ligne de commande qui poussera votre code sur les serveurs de Cloudflare. Sans ces deux briques, rien ne se déploie.
3Écrire le fichier wrangler.toml : donner une carte d'identité au sitedoute : « encore un fichier de configuration ? »
À la racine du projet, créez un fichier wrangler.toml. C'est la carte d'identité de votre déploiement : il dit à Cloudflare comment s'appelle votre site (name), à partir de quelle date de compatibilité il tourne (compatibility_date), et où trouver le code une fois compilé. Sans ce fichier, Cloudflare reçoit du code anonyme et ne sait pas quoi en faire.
4Ajouter les scripts de build et de deploy : se donner deux boutonsdoute : « pourquoi ne pas taper les commandes à chaque fois ? »
Dans votre package.json, ajoutez deux scripts : un script build:worker qui lance la compilation OpenNext pour Workers, et un script deploy qui lance wrangler deploy. Vous transformez deux opérations techniques en deux commandes simples que vous taperez sans réfléchir. C'est l'étape qui rend tout le reste répétable.
5Se connecter à Cloudflare : prouver que c'est bien vousdoute : « il faudra refaire ça souvent ? »
Dans votre terminal, lancez npx wrangler login. Votre navigateur s'ouvre, vous autorisez l'accès, et Wrangler garde un jeton sur votre machine. Vous ne referez jamais cette étape sur cet ordinateur. C'est le passage qui relie votre machine à votre compte.
6Compiler le site pour Workers : traduire avant d'envoyerdoute : « pourquoi compiler avant ? »
Lancez votre script build:worker. OpenNext compile votre site Next.js en un format que Workers comprend. Cette étape prend une à trois minutes et produit un dossier généré à la racine. Vous ne touchez pas à ce dossier : c'est la version traduite de votre site, prête à partir. On compile avant d'envoyer, jamais l'inverse.
7Déployer : pousser le site en lignedoute : « ça marche vraiment du premier coup ? »
Lancez votre script deploy. Wrangler envoie le code compilé sur Cloudflare. En trente secondes, votre site est en ligne, sur une adresse en .workers.dev. Cliquez dessus : votre site est accessible depuis n'importe où. Gardez cette adresse, elle vous servira de secours même après avoir branché votre vrai domaine.
8Vérifier le déploiement : ne jamais croire sur paroledoute : « c'est en ligne, donc c'est fini ? »
Ouvrez l'adresse dans votre navigateur. Parcourez chaque page, vérifiez que les images chargent, testez l'affichage sur mobile, cliquez sur tous les liens. Un déploiement réussi en apparence cache parfois une image absente ou un lien mort. Cette vérification manuelle vous coûte cinq minutes et vous évite de découvrir le problème par un visiteur.
9Préparer la mise à jour en une commande : rendre le futur faciledoute : « et la prochaine modification ? »
Chaque fois que vous modifierez votre site, il faudra recompiler puis redéployer. Au lieu de retenir deux commandes, créez un script ship qui enchaîne build:worker puis deploy. Une commande, deux minutes, votre site est à jour. C'est cette dernière étape qui transforme le déploiement d'un événement stressant en geste quotidien sans douleur.
À vous de jouer : votre wrangler.toml écrit à la main
Avant de toucher à une seule commande, faites l'étape la plus structurante à la main : écrivez votre wrangler.toml sur une feuille ou dans un fichier texte. Trois lignes suffisent à le cadrer.
Le résultat, en 30 secondes
À partir de votre seul package.json, le prompt vous rend un runbook de déploiement sur mesure : votre fichier de configuration, vos commandes dans l'ordre, et la liste des pièges à éviter.
Compatibilité : votre route /api/contact tourne en Node natif, elle ne passe pas sur Workers ; basculez en runtime edge, une ligne à changer. Votre wrangler.toml à coller à la racine : name = "cabinet-arnaud", compatibility_date = "2026-04-12". Déploiement : npx wrangler login (le navigateur s'ouvre), npm run build:worker (une à trois minutes), npm run deploy (trente secondes, l'adresse s'affiche : c'est en ligne).
Le prompt prêt à coller
# RÔLE Tu es un ingénieur de déploiement senior, spécialiste de Next.js et de Cloudflare Workers via OpenNext. Tu es pédagogue : tu expliques chaque commande avant de la donner, jamais l'inverse. Tu ne t'appuies QUE sur les informations que je te fournis sur mon projet. Toute information qui te manque, tu me la demandes au lieu de l'inventer. Si une dépendance ou une configuration que je décris est incompatible avec Cloudflare Workers, tu me le signales clairement au lieu de produire une configuration qui échouera. # CONTEXTE Je veux mettre mon site Next.js en ligne sur Cloudflare Workers, gratuitement, sans serveur à gérer. Je suis seul et je ne suis pas ingénieur. Je veux comprendre ce que je fais, pas seulement copier des commandes. Ma matière (si j'en ai) :
Le prompt génère votre wrangler.toml, vos scripts et votre runbook de déploiement complet d'un coup, adapté à votre projet exact, et il vous interroge si une information manque au lieu de deviner. Laissez votre email, je vous l'envoie.
Vérifiez que c'est à vous
Vous venez de modifier votre page d'accueil. Dans votre terminal, vous lancez directement la commande deploy, sans rien d'autre. Que voit votre visiteur ?
D'abord avec vos mots, sans regarder les options :
Expliquez-le pour l'ancrer
En une phrase, à quelqu'un qui n'a jamais déployé un site : pourquoi votre site ne vous coûte rien à héberger alors qu'il tourne sur trois cents centres de données dans le monde ? Si vous savez l'expliquer simplement, c'est à vous.
Ce que vous savez faire maintenant
- Poser un site Next.js en production sur Cloudflare Workers sans serveur à gérer et sans facture mensuelle.
- Expliquer le rôle de chaque pièce : OpenNext traduit, Wrangler pousse, wrangler.toml identifie.
- Remettre votre site à jour en une seule commande grâce au script ship.
- Vérifier un déploiement à la main au lieu de croire le terminal sur parole.
On compile avant d'envoyer, jamais l'inverse.
Continuez seul
Votre site est en ligne sur une adresse en .workers.dev. Marche suivante du parcours :
Pointer votre propre nom de domaine dessus →Faites-le avec moi
Je déploie votre site avec vous, en direct. Vous arrêtez de tâtonner seul devant un message d'erreur : votre site est en ligne ce soir, et vous savez pourquoi chaque commande existe.