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.

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.