nextjs-turbopack

Next.js und Turbopack

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

Wann verwenden

• Turbopack (Standard-Entwicklung): Verwenden Sie ihn für die tägliche Entwicklung. Schnellerer Kaltstart und HMR, besonders bei großen Apps.
• Webpack (Legacy-Entwicklung): Verwenden Sie ihn nur, wenn Sie auf einen Turbopack-Fehler stoßen oder sich auf ein reines webpack-Plugin in der Entwicklung verlassen. Deaktivieren Sie ihn mit --webpack (oder --no-turbopack, je nach Ihrer Next.js-Version; prüfen Sie die Dokumentation für Ihre Version).
• Produktion: Das Verhalten von Produktionsbuilds (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 dieses Skill, wenn Sie Next.js 16+-Apps entwickeln oder debuggen, langsame Entwicklungsstarts oder HMR diagnostizieren oder Produktions-Bundles optimieren.

Wie es funktioniert

• Turbopack: Inkrementeller Bundler für die Next.js-Entwicklung. Nutzt Dateisystem-Caching, sodass Neustarts viel schneller sind (z. B. 5–14× bei großen Projekten).
• Standard in der Entwicklung: Ab Next.js 16 läuft next dev mit Turbopack, sofern nicht deaktiviert.
• Dateisystem-Caching: Neustarts nutzen vorherige Arbeit; 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 Inspektion der Ausgabe und zum Auffinden schwerer Abhängigkeiten; aktivierbar über Konfiguration oder experimentelles Flag (siehe Next.js-Dokumentation für Ihre Version).

Beispiele

Befehle

next dev
next build
next start

Nutzung

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 verkleinern. Bevorzugen Sie App Router und Server-Komponenten, wo möglich.

Middleware-Dateibenennung

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

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

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

Kennzeichnen Sie proxy.ts in Next.js 16-Projekten nicht als falsch benannte oder fehlende Middleware-Datei. Die Datei ist korrekt und beabsichtigt. Der Vorschlag, sie in middleware.ts umzubenennen, 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 geleert wird.
• Verwenden Sie für Produktions-Bundle-Größenprobleme das offizielle Next.js-Bundle-Analyse-Tool für Ihre Version.