Vercel zu Cloudflare OpenNext: 90% Kosten senken

Die Vercel-Kostenfalle, die das Wachstum von Start-ups blockiert

Next.js ist heute der eindeutige Standard unter den Web-Frontend- und Fullstack-Frameworks. Und die meisten Entwicklerteams starten ihre Projekte auf Vercel, der Plattform der Next.js-Macher.

Die Developer Experience (DX) von Vercel ist hervorragend. Ein einziger Git-push reicht für eine unterbrechungsfreie Bereitstellung, eine Vorschau-URL wird generiert, und Bildoptimierung sowie ISR (Incremental Static Regeneration) funktionieren ohne zusätzliche Konfiguration.

Sobald Ihr Projekt jedoch wächst, die monatlich aktiven Nutzer (MAU) sprunghaft ansteigen oder der Traffic explodiert, verwandelt sich Vercel in eine „der gefährlichsten Cloud-Kostenfallen“.

[Vercel Pro Plan Grundgebühr: $20/Monat]
   + Fast Data Transfer (Egress): $0.15 pro GB ($150 bei 1TB Übertragung)
   + Serverless Execution (GB-hours): $0.18/GB-hr bei Überschreitung
   + Image Optimization: $5 pro 1.000 Bilder über 5.000
   + Build Minutes: $20 pro 1.000 Minuten über dem Basislimit
---------------------------------------------------
Tatsächliche monatliche Rechnung: $1,250 ~ $3,500+ /Monat

Insbesondere die Egress-Kosten (Daten-Outbound) und Bildoptimierungsgebühren von Vercel führen bei viralem Marketing oder Traffic-Spitzen im Handumdrehen zu unerwarteten Rechnungen über mehrere Tausend Dollar.

Um dieses Problem zu lösen, hat das Open-Source-Ökosystem für 2025/2026 die ultimative Antwort entwickelt: OpenNext. Mit OpenNext können Sie Ihre Next.js-App ohne Vercel-Vendor-Lock-in auf der Edge-Serverless-Infrastruktur von Cloudflare Workers bereitstellen und Ihre monatlichen Cloud-Kosten bei gleichem Traffic um mehr als 90% senken.

In diesem Artikel behandeln wir im Detail den genauen Kostenvergleich zwischen Vercel und Cloudflare, die Architektur und Migrationsschritte von OpenNext (@opennextjs/cloudflare), den Umgang mit der Node.js-API-Kompatibilität sowie die Fehlersuche in der Praxis.

Detaillierter Kostenvergleich: Vercel vs. Cloudflare Workers

Vergleichen wir die monatlichen Rechnungen beider Plattformen basierend auf demselben Service-Umfang (50 Millionen Seitenaufrufe pro Monat, 2 TB Traffic, Optimierung von 50.000 Bildern).

Cloudflare hält an der herausragenden Richtlinie fest, dass Egress-Kosten (Netzwerkübertragung) $0 betragen, und die Serverless-Ausführungskosten machen nur ein Zehntel von Vercel aus. Sobald Sie zu OpenNext migrieren, können Sie Ihren Dienst skalieren, ohne sich Gedanken über Infrastrukturkosten machen zu müssen.

OpenNext-Funktionsweise: Portierung von Next.js auf die Edge-Runtime

Next.js ist intern stark an die Node.js-Laufzeitumgebung und den proprietären Proxy von Vercel gebunden. OpenNext ist eine Adapter-Schicht, die die Next.js-Build-Artefakte (.next) analysiert und sie in plattformunabhängigen Standard-JavaScript- und Edge-Serverless-Code (kompatibel mit workerd) transpiliert.

[Next.js App Router-Projekt]
       |
       v  `npx opennextjs-cloudflare`
+----------------------------------------------------------------+
| OpenNext-Bundling-Engine                                        |
|                                                                |
|  ├── Server Bundle  --> Cloudflare Workers (workerd V8 Isolate)|
|  ├── Static Assets  --> Cloudflare Workers Static Assets / R2  |
|  └── Image Optimizer--> Cloudflare Image Resizing / Worker     |
+----------------------------------------------------------------+
       |
       v  `npx wrangler deploy`
[Bereitstellung im globalen Edge-Netzwerk von Cloudflare mit 300+ Standorten]

Von OpenNext unterstützte Next.js-Funktionen

• Vollständige Unterstützung für App Router & Pages Router
• Server Components (RSC) & Streaming-Rendering
• Server Actions & Route Handlers (POST/GET-APIs)
• ISR (Incremental Static Regeneration) und Revalidierung (revalidatePath, revalidateTag)
• Automatische Optimierung der Next.js Image Component (<Image />)

Schritt 1: Kompatibilitätsprüfung des Projekts vor der Migration

Bevor Sie Ihre Next.js-App zu Cloudflare Workers verschieben, gibt es aufgrund der Besonderheiten der Edge-Runtime 3 Faktoren, die Sie überprüfen müssen.

1. Entfernen von nativen Node.js C++-Bindings

Cloudflare Workers läuft in einer V8-Isolate-Runtime (workerd), weshalb Bibliotheken, die auf nativen C++-Modulen von Node.js wie fs, child_process oder sqlite3 basieren, nicht verwendet werden können.

• bcrypt -> Ersetzen durch bcryptjs oder Web Crypto API (crypto.subtle)
• jsonwebtoken -> Ersetzen durch jose 또는 hono/jwt
• pg / mysql2 -> Ersetzen durch pg (Node-compat-Kompatibilitätsmodus) oder Cloudflare Hyperdrive / Drizzle ORM

2. Überprüfen des nodejs_compat-Kompatibilitäts-Flags

Die neuesten OpenNext-Versionen (2025/2026) unterstützen die meisten Kern-APIs von Node.js wie Buffer, process, AsyncLocalStorage und stream nativ über das nodejs_compat-Kompatibilitäts-Flag von Cloudflare.

Schritt 2: Installation und Konfiguration von @opennextjs/cloudflare

Führen Sie die Installation im Stammverzeichnis Ihres bestehenden Next.js-Projekts aus.

Paketinstallation

# OpenNext Cloudflare Adapter und Wrangler installieren
npm install --save-dev @opennextjs/cloudflare wrangler@latest

open-next.config.ts erstellen

Erstellen Sie die OpenNext-Konfigurationsdatei (open-next.config.ts) im Projekt-Stammverzeichnis.

// open-next.config.ts
import type { OpenNextConfig } from "@opennextjs/aws/types/open-next.js";
import cache from "@opennextjs/cloudflare/kv-cache";

const config: OpenNextConfig = {
  default: {
    override: {
      wrapper: "cloudflare-node",
      converter: "edge",
      // Cloudflare KV-Binding für ISR und Caching verbinden
      incrementalCache: async () => cache,
      tagCache: async () => cache,
      queue: "dummy",
    },
  },
  middleware: {
    external: true,
    override: {
      wrapper: "cloudflare-edge",
      converter: "edge",
    },
  },
};

export default config;

wrangler.jsonc erstellen

Fügen Sie die Einstellungen für Workers und den KV-Cache zur Datei wrangler.jsonc für die Cloudflare-Bereitstellung hinzu.

// wrangler.jsonc
{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "my-nextjs-app",
  "main": ".open-next/worker.js",
  "compatibility_date": "2026-01-01",
  "compatibility_flags": ["nodejs_compat"],

  // Statische Next.js-Assets (CSS, JS, Bilder) als Workers Static Assets bereitstellen
  "assets": {
    "directory": ".open-next/assets",
    "binding": "ASSETS"
  },

  // KV-Namespace zur Speicherung des ISR-Caches
  "kv_namespaces": [
    {
      "binding": "NEXT_CACHE_WORKERS_KV",
      "id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }
  ],

  // Smart Placement und Hyperdrive-Einstellungen für DB-Anbindungen
  "placement": {
    "mode": "smart"
  }
}

Schritt 3: Lokale Build- und Deployment-Pipeline

Passen Sie die Skripte in package.json an, um den OpenNext-Build und das Wrangler-Deployment zu verknüpfen.

// package.json
{
  "name": "my-nextjs-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "build:worker": "opennextjs-cloudflare build",
    "preview": "opennextjs-cloudflare build && wrangler dev",
    "deploy": "opennextjs-cloudflare build && wrangler deploy"
  }
}

Lokaler Vorschau-Test

Testen Sie vor der Bereitstellung in Ihrer lokalen Umgebung, ob Next.js auf Basis der Cloudflare-workerd-Runtime ordnungsgemäß funktioniert.

npm run preview

Sobald die lokale Adresse (http://localhost:8787) im Terminal angezeigt wird, überprüfen Sie im Browser, ob Server Actions, Routing und das Rendering von SSR-Seiten einwandfrei funktionieren.

Cloudflare-Deployment ausführen

npm run deploy

In nur 30 Sekunden wird Ihr gesamtes Next.js-Projekt auf 300 Edge-Knoten von Cloudflare weltweit bereitgestellt!

Schritt 4: GitHub Actions CI/CD-Automatisierungspipeline

Richten Sie eine GitHub Actions-Pipeline ein, um die automatische Bereitstellungsfunktion von Vercel zu ersetzen.

# .github/workflows/deploy.yml
name: Deploy Next.js to Cloudflare Workers

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Build & Deploy
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "npm"

      - name: Install Dependencies
        run: npm ci

      - name: Build OpenNext Worker
        run: npm run build:worker

      - name: Deploy to Cloudflare Workers
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: deploy

Mit dieser Pipeline nutzen Sie das kostenlose Build-Kontingent von GitHub Actions ohne die Build-Zeit-Einschränkungen des Vercel Pro Plans und vervollständigen ein automatisches Bereitstellungssystem für $0 Kosten.

Fehlersuche in der Praxis: Häufig auftretende Migrationsfehler

Fehler 1: Dynamic Code Evaluation (eval) is not allowed

Ursache: Wenn einige Pakete (z. B. ältere ORMs oder Template-Engines) intern eval() oder new Function() verwenden, verletzt dies die Sicherheitsrichtlinie von workerd.

Lösung: Fügen Sie Webpack-Target- und Linter-Einstellungen zu next.config.js hinzu oder aktualisieren Sie auf neuere Module.

// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      config.ignoreWarnings = [{ module: /node_modules/ }];
    }
    return config;
  },
};

Fehler 2: ISR revalidatePath funktioniert nicht

Ursache: Der Name des KV-Namespace-Bindings stimmt nicht mit dem von OpenNext erwarteten Namen überein.

Lösung: Legen Sie den binding-Namen von kv_namespaces in wrangler.jsonc unbedingt als NEXT_CACHE_WORKERS_KV fest.

Fehler 3: Umgebungsvariablen (process.env) werden nicht erkannt

Ursache: Cloudflare Workers unterscheidet zwischen Umgebungsvariablen zum Build-Zeitpunkt und Laufzeit-Umgebungsvariablen.

Lösung: Versehen Sie Variablen in der .env-Datei, die für den Client sichtbar sein sollen, mit dem Präfix NEXT_PUBLIC_, und fügen Sie serverseitige Geheimschlüssel mit dem Befehl wrangler secret put hinzu.

npx wrangler secret put DATABASE_URL

Erfolgreiches Migrationsbeispiel: Kostenreduzierungsbericht

Dies sind die Ergebnisse des Migrationsberichts von Vercel zu Cloudflare Workers OpenNext eines echten Technologieunternehmens “Firma A”, das einen B2B-SaaS-Dienst anbietet.

[Vor der Migration: Vercel Enterprise/Pro]
- Monatlich durchschnittliche Anfragen: 85 Millionen
- Monatlich durchschnittlicher Egress-Traffic: 4.2 TB
- Bildoptimierung: 120.000 Bilder
- Monatliche Rechnung: $2,840.00 / Monat

[Nach der Migration: Cloudflare Workers + R2]
- Workers Paid Grundgebühr: $5.00
- Zusätzliche Anfragegebühren: $22.50
- Egress-Traffic-Gebühr: $0.00 (Kostenlos)
- R2 Storage & Image Resizing: $12.00
- Monatliche Rechnung: $39.50 / Monat

=> Gesamte Einsparung: 98.6% ($2,840 -> $39.50)

Firma A konnte die Infrastruktur-Wartungskosten um über 98% senken und gleichzeitig eine Leistungssteigerung erzielen, bei der sich die Cold-Start-Latenz von bisher 250 ms bei Vercel auf 12 ms reduzierte.

Fazit: Die smarte Wahl, um Vendor-Lock-in zu vermeiden

Vercel ist eine optimale Plattform für das schnelle Prototyping erster Ideen. Wenn der Dienst jedoch wächst und der Traffic zunimmt, stellt das Festhalten an der teuren Preispolitik von Vercel eine erhebliche Belastung für die finanzielle Gesundheit eines Unternehmens dar.

Die Kombination aus OpenNext und Cloudflare Workers bietet die folgenden starken Vorteile:

1. 100% Wiederverwendung von Next.js-Code: Vollständige Beibehaltung von Kernfunktionen wie App Router, Server Actions und ISR
2. $0 Traffic-Gebühren (Egress Free): Egal wie viele Benutzer zugreifen, es gibt keine unerwarteten Netzwerkübertragungskosten
3. Globales Edge-Rendering: Sofortige Antwort mit unter 10 ms Cold Start an Edge-Knoten in 300 Städten weltweit

Probieren Sie die OpenNext-Migration noch heute mit einem kleineren Nebenprojekt aus und erleben Sie eine erstaunliche Infrastrukturinnovation, die Ihre monatliche Rechnung um mehr als 90% senkt.

Ähnlicher Artikel: Lesen Sie auch unseren Leitfaden zum Aufbau von Edge-Datenbanken unter Drizzle ORM + Cloudflare D1: Edge SQLite-Architektur mit 99% kleinerem Bundle.