nextjs-turbopack

Next.js und Turbopack

Next.js 16+ verwendet standardmäßig Turbopack für die lokale Entwicklung: einen in Rust geschriebenen inkrementellen Bundler, der den Entwicklungsstart und Hot-Updates deutlich beschleunigt.

Wann verwenden

• Turbopack (Standard-Entwicklung): Verwenden für die tägliche Entwicklung. Schnellerer Kaltstart und HMR, besonders in großen Apps.
• Webpack (Legacy-Entwicklung): Nur verwenden, wenn ein Turbopack-Fehler auftritt oder ein webpack-only Plugin in der Entwicklung benötigt wird. Deaktivieren mit --webpack (oder --no-turbopack, abhängig von Ihrer Next.js-Version; überprüfen Sie die Dokumentation für Ihre Version).
• Produktion: Das Produktions-Build-Verhalten (next build) kann je nach Next.js-Version Turbopack oder webpack verwenden; überprüfen Sie die offizielle Next.js-Dokumentation für Ihre Version.

Verwenden Sie diese Fähigkeit, wenn Sie Next.js 16+ Apps entwickeln oder debuggen, langsamen Entwicklungsstart oder HMR diagnostizieren oder Produktions-Bundles optimieren.

Funktionsweise

• Turbopack: Inkrementeller Bundler für die Next.js-Entwicklung. Verwendet dateisystembasiertes Caching, sodass Neustarts viel schneller sind (z. B. 5–14x bei großen Projekten).
• Standard in der Entwicklung: Ab Next.js 16 läuft next dev standardmäßig mit Turbopack, es sei denn, es wird deaktiviert.
• Dateisystem-Caching: Neustarts verwenden vorherige Arbeit wieder; der Cache befindet sich typischerweise unter .next; keine zusätzliche Konfiguration für die grundlegende Nutzung erforderlich.
• Bundle Analyzer (Next.js 16.1+): Experimenteller Bundle Analyzer zur Überprüfung der Ausgabe und Auffindung schwerer Abhängigkeiten; aktivieren über Konfiguration oder Experimentelles Flag (siehe Next.js-Dokumentation für Ihre Version).

Beispiele

Befehle

next dev
next build
next start

Verwendung

Führen Sie next dev für die lokale Entwicklung mit Turbopack aus. Verwenden Sie den Bundle Analyzer (siehe Next.js-Dokumentation), um die Codeaufteilung zu optimieren und große Abhängigkeiten zu reduzieren. Bevorzugen Sie App Router und Server-Komponenten, wo möglich.

Middleware-Dateibenennung

Next.js 16 führte proxy.ts als Middleware-Dateinamen ein, der die ältere middleware.ts-Konvention ersetzt:

• Next.js 16+: Verwenden Sie proxy.ts im Projektstammverzeichnis
• Vor Next.js 16: Verwenden Sie middleware.ts im Projektstammverzeichnis

Die Dateinamensänderung ist an die Next.js-Version gebunden, nicht an den verwendeten Bundler (Turbopack oder webpack). Überprüfen Sie immer die offizielle Dokumentation für die von Ihnen verwendete Version.

Markieren Sie proxy.ts in Next.js 16 Projekten nicht als falsch benannte oder fehlende Middleware-Datei. Die Datei ist korrekt und beabsichtigt. Ein Vorschlag zur Umbenennung in middleware.ts würde die Middleware-Ausführung unterbrechen.

Referenz: Next.js proxy Dokumentation

Best Practices

• Bleiben Sie auf einer aktuellen Next.js 16.x für stabiles Turbopack- und Cache-Verhalten.
• Falls die Entwicklung langsam ist, stellen Sie sicher, dass Sie Turbopack (Standard) verwenden und der Cache nicht unnötig gelöscht wird.
• Bei Problemen mit der Produktions-Bundle-Größe verwenden Sie die offiziellen Next.js-Bundle-Analyse-Werkzeuge für Ihre Version.