Warum ich die meisten meiner Next.js-Projekte mit OpenNext auf Cloudflare bereitstelle

Ich habe im letzten Jahr mehrere Next.js-Projekte auf Cloudflare bereitgestellt, darunter Learn English Sounds (eine Ausspracheplattform mit über 900 Blogbeiträgen in 4 Sprachen, mit rund 10.000 Sitzungen pro Monat), diese Portfolio-Website und einige andere.

Ich habe Vercel, AWS, Google Cloud und Self-Hosting ausprobiert. Ich kehre immer wieder zu Next.js + OpenNext + Cloudflare zurück. Nicht immer. Meine Akzent-Trainings-App unter accent.learnenglishsounds.com läuft auf Firebase Hosting mit einem Cloud Run-Backend, weil das dort mehr Sinn ergab. Aber für inhaltslastige Websites ist Cloudflare jetzt mein Standard.

Etwas Interessantes: Mir ist kürzlich aufgefallen, dass Websites von Bundesbehörden wie techforce.gov, safedc.gov und americabydesign.gov genau diesen Stack verwenden. Next.js auf Cloudflare über OpenNext. Wenn die Regierung es für hochkarätige Dinge vertraut, ist es eindeutig produktionsreif.

Was ist OpenNext?

Hier ist das Problem: Next.js wird von Vercel entwickelt, und die besten Funktionen (ISR, Middleware, Bildoptimierung) sind in die Infrastruktur von Vercel integriert. Wenn Sie woanders bereitstellen, verlieren Sie Dinge.

OpenNext behebt dies. Das Paket @opennextjs/cloudflare wandelt Ihren Next.js-Build in etwas um, das Cloudflare Workers nativ ausführen können: App Router, Server Components, API-Routen, alles davon.

Warum Cloudflare statt Vercel?

Vercel ist großartig. Die DX ist wirklich erstklassig. Aber hier ist der Grund, warum ich gewechselt bin:

1. Kosten bei Skalierung

Die kostenlose Stufe von Vercel ist großzügig für Hobbyprojekte, aber die Kosten steigen bei hohem Traffic schnell an. Eines Monats erhielt ich eine Rechnung über 130 $. Fairerweise hat Vercel einen Teil davon erstattet, nachdem ich mich gemeldet hatte. Aber für einfache Content-Websites ist eine solche Überraschung nicht tragbar. Learn English Sounds bedient täglich Tausende von Besuchern in 4 Sprachen, und allein die Bandbreite würde diese Rechnungen in die Höhe treiben.

Cloudflare bietet mir:

• Unbegrenzte Bandbreite (alle Pläne)
• 500 Builds/Monat kostenlos, unbegrenzt bei bezahlten Plänen
• CDN-Verteilung auf über 300 Edge-Standorte

Ich zahle 5 $/Monat für den Workers Paid Plan. Das deckt mehrere Produktionswebsites ab.

2. Globale Leistung

Das Edge-Netzwerk von Cloudflare ist riesig. Statische Assets werden an Edge-Standorten weltweit zwischengespeichert. Mit s-maxage=31536000 erhalten wiederkehrende Besucher nahezu sofortige Ladezeiten.

3. Integriertes Ökosystem

Cloudflare ist nicht nur Hosting. Ich verwende:

• Cloudflare Images: Automatische Bildoptimierung und -skalierung
• Turnstile: Bot-Schutz ohne störende CAPTCHAs
• D1: Serverless SQLite für einfache Datenbankanforderungen
• KV: Key-Value-Speicher für Caching und Konfiguration
• Workers: Edge-Funktionen, wenn ich benutzerdefinierte Logik benötige

Ein Dashboard, eine Rechnung.

Das Setup

Hier ist eine typische Bereitstellung:

1. Abhängigkeiten installieren

npm install @opennextjs/cloudflare

2. OpenNext konfigurieren

Erstellen Sie open-next.config.ts:

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

export default defineCloudflareConfig({});

3. wrangler.toml hinzufügen

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. Bauen und bereitstellen

npx opennextjs-cloudflare build
npx wrangler deploy

Fertig. Sie laufen auf Cloudflare Workers.

Was gut funktioniert

• App Router: Volle RSC-Unterstützung, Layouts, Ladezustände
• API-Routen: Sowohl pages/api als auch app/api funktionieren
• Middleware: Läuft am Edge mit vollem Zugriff auf die Request/Response API
• Statische Generierung: generateStaticParams funktioniert wie erwartet
• Bildoptimierung: Funktioniert über Cloudflare Images

Ein paar Dinge, auf die man achten sollte

Einige Dinge, auf die man achten sollte:

• ISR-Einschränkungen: Incremental Static Regeneration funktioniert anders. Ich verwende stattdessen Stale-While-Revalidate-Muster.
• Node.js APIs: Einige Node-APIs sind in Workers nicht verfügbar. Verwenden Sie nach Möglichkeit Web APIs.
• Build-Zeiten: Große Websites dauern länger, da alles in Edge-kompatiblen Code kompiliert wird.
• Debugging: Fehlermeldungen können kryptisch sein. Verwenden Sie wrangler dev lokal, um Probleme frühzeitig zu erkennen.

Wann dieser Stack verwendet werden sollte

Eignet sich am besten für:

• Inhaltslastige Websites (Blogs, Dokumentationen, Marketingseiten)
• Mehrsprachige Anwendungen
• Projekte, bei denen Kostenvorhersehbarkeit wichtig ist
• Teams, die Cloudflare bereits für DNS oder Sicherheit nutzen

Erste Schritte

Wenn Sie dies ausprobieren möchten:

1. Lesen Sie die OpenNext Cloudflare Dokumentation
2. Beginnen Sie mit einem einfachen Projekt, um den Build-Prozess zu verstehen
3. Verwenden Sie wrangler dev für die lokale Entwicklung
4. Richten Sie Vorschau-Deployments für Pull Requests ein

Die Lernkurve ist minimal, wenn Sie bereits mit Next.js vertraut sind. Der größte Teil Ihres Codes bleibt unverändert.