junksidetm/darkside-toolkit

Next.js und Turbopack

Next.js 16+ verwendet standardmäßig Turbopack für die lokale Entwicklung: ein inkrementeller Bundler, der in Rust geschrieben ist und die Entwicklungsstartzeit sowie Hot Updates erheblich beschleunigt.

Verwendungszweck

• Turbopack (Standard-Dev): Verwenden Sie dies für die tägliche Entwicklung. Schnellerer Kaltstart und HMR, besonders bei großen Apps.
• Webpack (Legacy-Dev): Verwenden Sie dies nur, wenn Sie auf einen Turbopack-Fehler stoßen oder auf ein Webpack-Plugin angewiesen sind. Deaktivieren Sie es mit --webpack (oder --no-turbopack, abhängig von Ihrer Next.js-Version; prü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; prüfen Sie die offizielle Next.js-Dokumentation für Ihre Version.

Verwenden Sie dies bei: Entwicklung oder Fehlersuche in Next.js 16+-Apps, Diagnose von langsamen Dev-Starts oder HMR oder Optimierung von Produktions-Bundles.

Funktionsweise

• Turbopack: Inkrementeller Bundler für Next.js-Dev. Verwendet Dateisystem-Caching, sodass Neustarts viel schneller sind (z. B. 5–14x bei großen Projekten).
• Standard in Dev: Ab Next.js 16 läuft next dev standardmäßig mit Turbopack, sofern nicht deaktiviert.
• Dateisystem-Caching: Neustarts verwenden vorherige Arbeit wieder; der Cache befindet sich normalerweise 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 zum Auffinden schwerer Abhängigkeiten; aktivieren Sie ihn über die Konfiguration oder ein 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 Code-Splitting zu optimieren und große Abhängigkeiten zu reduzieren. Bevorzugen Sie den App Router und Serverkomponenten, wo möglich.

Middleware-Dateibenennung

Next.js 16 hat proxy.ts als Middleware-Dateinamen eingeführt, der die ältere Konvention middleware.ts ersetzt:

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

Die Dateinamenä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 nicht als falsch benannte oder fehlende Middleware-Datei in Next.js 16-Projekten. Die Datei ist korrekt und beabsichtigt. Eine 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-Version für stabiles Turbopack und Caching-Verhalten.
• Wenn die Entwicklung langsam ist, stellen Sie sicher, dass Sie Turbopack (Standard) verwenden und der Cache nicht unnötig gelöscht wird.
• Verwenden Sie bei Problemen mit der Produktions-Bundle-Größe die offiziellen Next.js-Bundle-Analyse-Tools für Ihre Version.