Perché distribuisco la maggior parte dei miei progetti Next.js su Cloudflare con OpenNext

Negli ultimi anni ho distribuito diversi progetti Next.js su Cloudflare, tra cui Learn English Sounds (una piattaforma di pronuncia con oltre 900 articoli in 4 lingue, gestendo circa 10K sessioni al mese), questo sito portfolio e alcuni altri.

Ho provato Vercel, AWS, Google Cloud, hosting self-hosted. Continuo a tornare a Next.js + OpenNext + Cloudflare. Non sempre. La mia app per l'allenamento dell'accento su accent.learnenglishsounds.com gira su Firebase Hosting con un backend Cloud Run perché aveva più senso in quel contesto. Ma per i siti ricchi di contenuti, Cloudflare è la mia scelta predefinita ora.

Qualcosa di interessante: ho notato di recente che siti del governo federale come techforce.gov, safedc.gov e americabydesign.gov utilizzano esattamente questo stack. Next.js su Cloudflare tramite OpenNext.

Cos'è OpenNext?

Ecco il problema: Next.js è sviluppato da Vercel e le funzionalità migliori (ISR, middleware, ottimizzazione delle immagini) sono integrate nell'infrastruttura di Vercel. Se fai il deploy altrove, perdi qualcosa.

OpenNext risolve questo problema. Il pacchetto @opennextjs/cloudflare converte la tua build Next.js in qualcosa che Cloudflare Workers può eseguire nativamente: App Router, componenti server, API route, tutto.

Perché Cloudflare invece di Vercel?

Vercel è ottimo. La DX è davvero la migliore della categoria. Ma ecco perché sono passato ad altro:

1. Costi su larga scala

Il piano gratuito di Vercel è generoso per i progetti hobby, ma i costi aumentano rapidamente con il traffico. Un mese ho ricevuto una fattura di $130. Per essere onesti, Vercel mi ha rimborsato una parte dopo che ho contattato l'assistenza. Ma per semplici siti di contenuti, quel tipo di sorpresa non è sostenibile. Learn English Sounds serve migliaia di visitatori giornalieri in 4 lingue, e solo la larghezza di banda farebbe lievitare quelle fatture.

Cloudflare mi offre:

• Larghezza di banda illimitata (tutti i piani)
• 500 build/mese gratuite, illimitate sui piani a pagamento
• Distribuzione CDN su oltre 300 sedi edge

Io pago $5 al mese per il piano Workers a pagamento. Questo copre più siti di produzione.

2. Prestazioni globali

La rete edge di Cloudflare è enorme. Gli asset statici vengono memorizzati nella cache nelle sedi edge di tutto il mondo. Con s-maxage=31536000, i visitatori di ritorno ottengono caricamenti quasi istantanei.

3. Ecosistema integrato

Cloudflare non è solo hosting. Io uso:

• Cloudflare Images: Ottimizzazione e ridimensionamento automatico delle immagini
• Turnstile: Protezione dai bot senza fastidiosi CAPTCHA
• D1: SQLite serverless per esigenze di database semplici
• KV: Archiviazione key-value per caching e configurazione
• Workers: Funzioni edge quando ho bisogno di logica personalizzata

Un unico pannello di controllo, una sola fattura.

La configurazione

Ecco un deployment tipico:

1. Installare le dipendenze

npm install @opennextjs/cloudflare

2. Configurare OpenNext

Crea open-next.config.ts:

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

export default defineCloudflareConfig({});

3. Aggiungere 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. Build e deploy

npx opennextjs-cloudflare build
npx wrangler deploy

Fatto. Stai eseguendo su Cloudflare Workers.

Cosa funziona bene

• App Router: Supporto completo per RSC, layout, stati di caricamento
• API Routes: Funzionano sia le route in pages/api che in app/api
• Middleware: Eseguito all'edge con accesso completo alle API Request/Response
• Static Generation: generateStaticParams funziona come previsto
• Image Optimization: Funziona tramite Cloudflare Images

Alcune cose a cui fare attenzione

Alcune cose a cui prestare attenzione:

• Limitazioni ISR: Incremental Static Regeneration funziona in modo diverso. Io uso invece pattern stale-while-revalidate.
• API Node.js: Alcune API Node.js non sono disponibili in Workers. Utilizza le Web API quando possibile.
• Tempi di build: I siti grandi richiedono più tempo poiché tutto viene compilato in codice compatibile con l'edge.
• Debugging: I messaggi di errore possono essere criptici. Usa wrangler dev in locale per intercettare i problemi in anticipo.

Quando usare questo stack

Funziona meglio per:

• Siti ricchi di contenuti (blog, documentazione, pagine di marketing)
• Applicazioni multilingue
• Progetti in cui la prevedibilità dei costi è importante
• Team che utilizzano già Cloudflare per DNS o sicurezza

Per iniziare

Se vuoi provare questo:

1. Consulta la documentazione di OpenNext per Cloudflare
2. Inizia con un progetto semplice per capire il processo di build
3. Usa wrangler dev per lo sviluppo locale
4. Imposta i deployment di anteprima per le pull request

La curva di apprendimento è minima se conosci già Next.js. La maggior parte del tuo codice rimane invariata.