Pourquoi je déploie la plupart de mes projets Next.js sur Cloudflare avec OpenNext

J'ai déployé plusieurs projets Next.js sur Cloudflare au cours de l'année écoulée, notamment Learn English Sounds (une plateforme de prononciation avec plus de 900 articles de blog dans 4 langues, gérant environ 10K sessions par mois), ce site portfolio, et quelques autres.

J'ai essayé Vercel, AWS, Google Cloud, l'auto-hébergement. Je reviens toujours à Next.js + OpenNext + Cloudflare. Pas toujours. Mon application d'entraînement à l'accentuation sur accent.learnenglishsounds.com fonctionne sur Firebase Hosting avec un backend Cloud Run car cela avait plus de sens dans ce contexte. Mais pour les sites riches en contenu, Cloudflare est désormais mon choix par défaut.

Quelque chose d'intéressant : j'ai récemment remarqué que des sites gouvernementaux fédéraux comme techforce.gov, safedc.gov et americabydesign.gov utilisent exactement cette pile technologique. Next.js sur Cloudflare via OpenNext. Si le gouvernement fédéral lui fait confiance pour des choses de haut niveau, c'est clairement prêt pour la production.

Qu'est-ce qu'OpenNext ?

Voici le problème : Next.js est développé par Vercel, et les meilleures fonctionnalités (ISR, middleware, optimisation d'images) sont intégrées à l'infrastructure de Vercel. Déployez ailleurs et vous perdez des éléments.

OpenNext résout ce problème. Le paquet @opennextjs/cloudflare convertit votre build Next.js en quelque chose que Cloudflare Workers peut exécuter nativement : App Router, composants serveur, routes API, tout y passe.

Pourquoi Cloudflare plutôt que Vercel ?

Vercel est excellent. L'expérience développeur (DX) est vraiment la meilleure de sa catégorie. Mais voici pourquoi j'ai changé :

1. Coût à l'échelle

Le niveau gratuit de Vercel est généreux pour les projets personnels, mais les coûts augmentent rapidement avec le trafic. J'ai reçu une facture de 130 $ un mois. Pour être juste, Vercel a remboursé une partie après que j'ai pris contact. Mais pour de simples sites de contenu, ce genre de surprise n'est pas viable. Learn English Sounds dessert des milliers de visiteurs quotidiens dans 4 langues, et la bande passante seule ferait grimper ces factures.

Cloudflare m'offre :

• Bande passante illimitée (tous les plans)
• 500 builds/mois gratuits, illimités sur les plans payants
• Distribution CDN vers plus de 300 emplacements périphériques (edge locations)

Je paie 5 $/mois pour le plan payant Workers. Cela couvre plusieurs sites en production.

2. Performance mondiale

Le réseau périphérique (edge network) de Cloudflare est immense. Les actifs statiques sont mis en cache dans des emplacements périphériques du monde entier. Avec s-maxage=31536000, les visiteurs de retour bénéficient de chargements quasi instantanés.

3. Écosystème intégré

Cloudflare n'est pas seulement de l'hébergement. J'utilise :

• Cloudflare Images : Optimisation et redimensionnement automatiques des images
• Turnstile : Protection contre les bots sans CAPTCHA agaçants
• D1 : SQLite sans serveur pour les besoins de base de données simples
• KV : Stockage clé-valeur pour la mise en cache et la configuration
• Workers : Fonctions périphériques lorsque j'ai besoin d'une logique personnalisée

Un seul tableau de bord, une seule facture.

La configuration

Voici un déploiement typique :

1. Installer les dépendances

npm install @opennextjs/cloudflare

2. Configurer OpenNext

Créer open-next.config.ts :

import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig({});

3. Ajouter wrangler.toml

name = "my-nextjs-site"
main = ".open-next/worker.js"
compatibility_date = "2025-09-11"
compatibility_flags = ["nodejs_compat"]

[assets]
  directory = ".open-next/assets"
  binding = "ASSETS"

4. Construire et déployer

npx opennextjs-cloudflare build
npx wrangler deploy

Terminé. Vous fonctionnez sur Cloudflare Workers.

Ce qui fonctionne bien

• App Router : Prise en charge complète de RSC, mises en page, états de chargement
• Routes API : Les routes pages/api et app/api fonctionnent
• Middleware : S'exécute à la périphérie avec un accès complet aux API Request/Response
• Génération Statique : generateStaticParams fonctionne comme prévu
• Optimisation d'Images : Fonctionne via Cloudflare Images

Quelques points à surveiller

Quelques points à surveiller :

• Limitations ISR : La régénération statique incrémentielle fonctionne différemment. J'utilise des schémas stale-while-revalidate à la place.
• API Node.js : Certaines API Node ne sont pas disponibles dans Workers. Privilégiez les API Web lorsque c'est possible.
• Temps de build : Les grands sites prennent plus de temps car tout est compilé en code compatible avec la périphérie.
• Débogage : Les messages d'erreur peuvent être cryptiques. Utilisez wrangler dev localement pour détecter les problèmes tôt.

Quand utiliser cette pile

Fonctionne mieux pour :

• Sites riches en contenu (blogs, documentation, pages marketing)
• Applications multilingues
• Projets où la prévisibilité des coûts est importante
• Équipes utilisant déjà Cloudflare pour le DNS ou la sécurité

Pour commencer

Si vous souhaitez essayer cela :

1. Consultez la documentation OpenNext pour Cloudflare
2. Commencez par un projet simple pour comprendre le processus de build
3. Utilisez wrangler dev pour le développement local
4. Configurez des déploiements de prévisualisation pour les pull requests

La courbe d'apprentissage est minime si vous connaissez déjà Next.js. La majorité de votre code reste la même.