- vinext ist ein mit Next.js kompatibles Framework, das von AI und einem einzelnen Engineer in nur einer Woche entwickelt wurde. Es basiert auf Vite und kann mit einem einzigen Befehl auf Cloudflare Workers deployt werden
- Die Build-Geschwindigkeit ist bis zu 4,4-mal höher, die Größe des Client-Bundles ist 57 % kleiner, und bestehende Next.js-Projekte können dieselbe Verzeichnisstruktur und Konfiguration unverändert weiterverwenden
- Es wurde für Cloudflare Workers entworfen und unterstützt KV-basiertes ISR-Caching sowie Traffic-aware Pre-Rendering, also verkehrsbasiertes Pre-Rendering
- Der Großteil des gesamten Codes wurde von AI geschrieben; über 1.700 Tests und automatisierte Code-Reviews sichern die Qualität
- Das Projekt ist ein Beispiel dafür, dass AI inzwischen komplexe Frameworks neu implementieren kann, und zeigt das Potenzial für künftige Veränderungen in der Struktur der Softwareentwicklung
Die Grenzen der Bereitstellung von Next.js und die Problemwahrnehmung
- Next.js ist ein führendes React-basiertes Framework, doch für Deployments in serverlosen Umgebungen ist ein komplexer Umwandlungsprozess der Build-Ausgabe erforderlich
- Für Deployments auf Cloudflare, Netlify, AWS Lambda usw. muss das Turbopack-Build-Ergebnis von Next.js jeweils plattformspezifisch umstrukturiert werden
- OpenNext versuchte dieses Problem zu lösen, stieß jedoch auf strukturelle Grenzen, weil die Build-Ausgabe von Next.js rückwärts erschlossen werden muss, was je nach Version zu Instabilitäten führte
- An einer Adapter-API für Next.js wird gearbeitet, aber durch die ausschließlich auf Node.js ausgelegte Struktur des Dev-Servers ist das Testen plattformspezifischer APIs erschwert
Architektur und Merkmale von vinext
- vinext ist ein alternatives Framework, das die API von Next.js direkt auf Vite neu implementiert
- Nach
npm install vinext kann ein bestehendes Projekt unverändert ausgeführt werden, wenn der Befehl next durch vinext ersetzt wird
- Mit
vinext dev, vinext build und vinext deploy werden Entwicklung, Build und Deployment vereinheitlicht
- Routing, Server-Rendering, React Server Components, Server Actions, Caching und Middleware sowie weitere zentrale Funktionen von Next.js wurden als Vite-Plugins implementiert
- Mithilfe der Vite Environment API werden plattformunabhängige Build-Ergebnisse erzeugt
Performance-Benchmarks
- Vergleich mit Next.js 16 anhand derselben App mit 33 Routen
- Build-Zeit: vinext (Vite 8/Rolldown) 1,67 Sekunden → 4,4-mal schneller als Next.js
- Größe des Client-Bundles: 72,9 KB → 57 % kleiner als bei Next.js
- Die Tests wurden in GitHub CI ausgeführt; gemessen wurden ausschließlich Kompilierungs- und Bündelungsgeschwindigkeit
- Der Rust-basierte Bundler Rolldown aus Vite 8 trägt zur besseren Build-Performance bei
Deployment auf Cloudflare Workers
- Mit dem Befehl
vinext deploy werden Build und Deployment automatisch ausgeführt
- Sowohl App Router als auch Pages Router werden unterstützt, einschließlich Client-Hydration und State-Management
- Über den Cloudflare-KV-Cache-Handler wird ISR (Incremental Static Regeneration) standardmäßig bereitgestellt
- Das Cache-Backend ist austauschbar und kann auf R2 oder die Cache API erweitert werden
- Als reale Beispiele werden unter anderem ein App Router Playground und ein Hacker-News-Klon veröffentlicht
Traffic-aware Pre-Rendering (TPR)
- Die Ineffizienz des statischen Pre-Renderings auf Basis von
generateStaticParams() in bisherigem Next.js wird verbessert
- Mithilfe von Traffic-Daten von Cloudflare werden nur Seiten mit vielen Besuchen in den letzten 24 Stunden vorab gerendert
- Beispiel: Von 100.000 Seiten werden nur 184 Seiten (90 % des gesamten Traffics) innerhalb von 8,3 Sekunden gerendert
- Die übrigen Seiten werden bei Anfrage per SSR gerendert und anschließend per ISR gecacht; bei jedem Deployment erfolgt eine automatische Aktualisierung entsprechend dem Traffic-Muster
AI-gestützter Entwicklungsprozess
- Der Großteil des Projektcodes wurde von AI geschrieben, bei Gesamtkosten von rund 1.100 US-Dollar
- Mit 1.700 Vitest- und 380 Playwright-Tests wurde eine Kompatibilität von 94 % zur Next.js-API erreicht
- Entwicklungsablauf
- AI implementiert Funktionen und schreibt Tests → Tests werden ausgeführt → bei Fehlschlägen wird Fehler-Feedback gegeben und erneut versucht
- Ein AI-Agent führt sogar Code-Reviews und Korrekturen automatisch aus, während Menschen nur Richtung und Struktur steuern
- In OpenCode wurden mehr als 800 Sitzungen durchgeführt, unter Verwendung von Claude-Modellen
Faktoren, die dies durch AI ermöglichten
- Dank der klaren Dokumentation von Next.js und der umfangreichen Test-Suite konnte AI präzise lernen
- Die stabile Build-Struktur von Vite diente als Grundlage
- Moderne AI-Modelle haben ein Niveau erreicht, auf dem sie strukturelle Konsistenz in großen Codebasen aufrechterhalten und Interaktionen zwischen Modulen ableiten können
Implikationen für die Softwareentwicklung
- Die bisherige mehrschichtige Framework-Struktur war ein Ergebnis zur Kompensation menschlicher kognitiver Grenzen
- Da AI das Gesamtsystem im Kontext verstehen und direkt Code schreiben kann, nimmt der Bedarf an zwischengelagerten Abstraktionsschichten ab
- vinext ist ein Beleg dafür, dass AI allein mit Spezifikation und Basistools komplexe Frameworks fertigstellen kann
Open Source und Zusammenarbeit
- Rund 95 % von vinext bestehen aus nicht von Cloudflare abhängendem Vite-Code, sodass es auch auf anderen Hosting-Plattformen eingesetzt werden kann
- Ein PoC auf Vercel wurde innerhalb von 30 Minuten erfolgreich umgesetzt
- Das Projekt ist als Open Source veröffentlicht, und PRs für andere Plattformen sowie zusätzliche Deployment-Ziele sind willkommen
Experimenteller Status und praktischer Einsatz
- vinext befindet sich noch in einer experimentellen Phase; eine Validierung unter großem Traffic steht noch aus
- National Design Studio setzt es bereits auf der Regierungswebsite CIO.gov real ein und bestätigt Verbesserungen bei Build-Zeit und Bundle-Größe
- Im README sind nicht unterstützte Funktionen und bekannte Einschränkungen aufgeführt
Verwendung
- Über Agent Skill wird in AI-Tools wie Claude Code oder Cursor eine automatische Migration unterstützt
npx skills add cloudflare/vinext → Umstellung mit dem Befehl „migrate this project to vinext“
- Manuell kann es mit
npx vinext init, vinext dev und vinext deploy verwendet werden
- Der Quellcode ist auf GitHub unter cloudflare/vinext verfügbar
Danksagung und zugrunde liegende Technologien
- Dank der Unterstützung des Vite-Teams und
@vitejs/plugin-rsc konnte die Funktionalität von React Server Components umgesetzt werden
- Die Dokumentation und Test-Suite des Next.js-Teams bildeten eine entscheidende Grundlage für den Erfolg des Projekts
Noch keine Kommentare.