Waarom ik de meeste van mijn Next.js projecten naar Cloudflare deploy met OpenNext

Ik heb het afgelopen jaar verschillende Next.js-projecten op Cloudflare geïmplementeerd, waaronder Learn English Sounds (een uitspraakplatform met meer dan 900 blogposts in 4 talen, met ongeveer 10K sessies per maand), deze portfolio-site en een paar andere.

Ik heb Vercel, AWS, Google Cloud en self-hosting geprobeerd. Ik keer steeds terug naar Next.js + OpenNext + Cloudflare. Niet altijd. Mijn app voor accenttraining op accent.learnenglishsounds.com draait op Firebase Hosting met een Cloud Run-backend, omdat dat daar logischer was. Maar voor contentrijke sites is Cloudflare nu mijn standaard.

Iets interessants: ik merkte onlangs dat sites van de federale overheid, zoals techforce.gov, safedc.gov en americabydesign.gov, precies deze stack gebruiken. Next.js op Cloudflare via OpenNext. Als de overheid het vertrouwt voor belangrijke zaken, is het duidelijk klaar voor productie.

Wat is OpenNext?

Hier is het probleem: Next.js is gebouwd door Vercel, en de beste functies (ISR, middleware, beeldoptimalisatie) zijn ingebakken in de infrastructuur van Vercel. Implementeer elders en je verliest functionaliteit.

OpenNext lost dit op. Het pakket @opennextjs/cloudflare converteert je Next.js-build naar iets dat Cloudflare Workers native kunnen uitvoeren: App Router, servercomponenten, API-routes, alles.

Waarom Cloudflare boven Vercel?

Vercel is geweldig. De DX is echt van topklasse. Maar hier is waarom ik ben overgestapt:

1. Kosten bij schaal

De gratis laag van Vercel is genereus voor hobbyprojecten, maar de kosten stijgen snel met het verkeer. Ik kreeg op een maand een factuur van $130. Om eerlijk te zijn, Vercel heeft een deel ervan terugbetaald nadat ik contact had opgenomen. Maar voor eenvoudige contentwebsites is dat soort verrassing niet houdbaar. Learn English Sounds bedient dagelijks duizenden bezoekers in 4 talen, en alleen al de bandbreedte zou die rekeningen blijven opdrijven.

Cloudflare biedt mij:

• Onbeperkte bandbreedte (alle plannen)
• 500 builds/maand gratis, onbeperkt op betaalde plannen
• CDN-distributie naar meer dan 300 edge-locaties

Ik betaal $5/maand voor het betaalde Workers-plan. Dat dekt meerdere productie-sites.

2. Wereldwijde prestaties

Het edge-netwerk van Cloudflare is enorm. Statische assets worden gecachet op edge-locaties wereldwijd. Met s-maxage=31536000 krijgen terugkerende bezoekers bijna onmiddellijke laadtijden.

3. Geïntegreerd ecosysteem

Cloudflare is meer dan alleen hosting. Ik gebruik:

• Cloudflare Images: Automatische beeldoptimalisatie en resizing
• Turnstile: Botbescherming zonder vervelende CAPTCHA's
• D1: Serverless SQLite voor eenvoudige databasebehoeften
• KV: Key-value opslag voor caching en configuratie
• Workers: Edge-functies wanneer ik aangepaste logica nodig heb

Eén dashboard, één factuur.

De setup

Hier is een typische implementatie:

1. Installeer afhankelijkheden

npm install @opennextjs/cloudflare

2. Configureer OpenNext

Maak open-next.config.ts aan:

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

export default defineCloudflareConfig({});

3. Voeg wrangler.toml toe

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 en implementeer

npx opennextjs-cloudflare build
npx wrangler deploy

Klaar. Je draait op Cloudflare Workers.

Wat goed werkt

• App Router: Volledige RSC-ondersteuning, lay-outs, laadstatussen
• API Routes: Zowel pages/api als app/api werken
• Middleware: Draait aan de edge met volledige toegang tot de Request/Response API
• Static Generation: generateStaticParams werkt zoals verwacht
• Image Optimization: Werkt via Cloudflare Images

Een paar dingen om op te letten

Een paar dingen om op te letten:

• ISR-beperkingen: Incremental Static Regeneration werkt anders. Ik gebruik in plaats daarvan stale-while-revalidate patronen.
• Node.js API's: Sommige Node API's zijn niet beschikbaar in Workers. Gebruik waar mogelijk Web API's.
• Buildtijden: Grote sites duren langer omdat alles wordt gecompileerd naar edge-compatibele code.
• Debuggen: Foutmeldingen kunnen cryptisch zijn. Gebruik wrangler dev lokaal om problemen vroegtijdig op te vangen.

Wanneer gebruik je deze stack?

Werkt het beste voor:

• Contentrijke sites (blogs, documentatie, marketingpagina's)
• Meertalige applicaties
• Projecten waarbij kostenvoorspelbaarheid belangrijk is
• Teams die Cloudflare al gebruiken voor DNS of beveiliging

Aan de slag

Als je dit wilt proberen:

1. Bekijk de OpenNext Cloudflare documentatie
2. Begin met een eenvoudig project om het buildproces te begrijpen
3. Gebruik wrangler dev voor lokale ontwikkeling
4. Stel preview-implementaties in voor pull-requests

De leercurve is minimaal als je al bekend bent met Next.js. Het grootste deel van je code blijft hetzelfde.