Menu

Turbopack

Turbopack ist ein inkrementeller Bundler, der für JavaScript und TypeScript optimiert ist, in Rust geschrieben und in Next.js integriert.

Verwendung

Turbopack kann in Next.js sowohl im pages- als auch im app-Verzeichnis für eine schnellere lokale Entwicklung verwendet werden. Um Turbopack zu aktivieren, verwenden Sie das Flag --turbopack beim Ausführen des Next.js-Entwicklungsservers.

package.json
{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Unterstützte Funktionen

Turbopack in Next.js erfordert keine Konfiguration für die meisten Benutzer und kann für fortgeschrittene Anwendungsfälle erweitert werden. Um mehr über die derzeit unterstützten Funktionen von Turbopack zu erfahren, sehen Sie die API-Referenz.

Nicht unterstützte Funktionen

Turbopack unterstützt derzeit nur next dev und nicht next build. Wir arbeiten aktuell an der Unterstützung von Builds, während wir uns der Stabilität nähern.

Folgende Funktionen werden derzeit nicht unterstützt:

  • Turbopack nutzt Lightning CSS, das einige selten genutzte CSS-Modul-Funktionen nicht unterstützt
    • :local und :global als eigenständige Pseudoklassen. Nur die Funktionsvariante wird unterstützt, zum Beispiel: :global(a).
    • Die @value-Regel, die durch CSS-Variablen ersetzt wurde.
    • :import- und :export-ICSS-Regeln.
  • Ungültige CSS-Kommentarsyntax wie //
    • CSS-Kommentare sollten gemäß der Spezifikation als /* Kommentar */ geschrieben werden.
    • Präprozessoren wie Sass unterstützen diese alternative Kommentarsyntax.
  • webpack()-Konfiguration in next.config.js
    • Turbopack ersetzt Webpack, was bedeutet, dass Webpack-Konfigurationen nicht unterstützt werden.
    • Zur Konfiguration von Turbopack lesen Sie die Dokumentation.
    • Eine Teilmenge von Webpack-Loadern wird in Turbopack unterstützt.
  • Babel (.babelrc)
    • Turbopack nutzt den SWC-Compiler für alle Transpilation und Optimierungen. Das bedeutet, Babel ist standardmäßig nicht enthalten.
    • Wenn Sie eine .babelrc-Datei haben, benötigen Sie diese möglicherweise nicht mehr, da Next.js häufige Babel-Plugins als SWC-Transformationen enthält, die aktiviert werden können. Weitere Informationen finden Sie in der Compiler-Dokumentation.
    • Wenn Sie Babel nach Überprüfung Ihres speziellen Anwendungsfalls weiterhin benötigen, können Sie Turbopack's Unterstützung für benutzerdefinierte Webpack-Loader nutzen, um babel-loader einzubinden.
  • Automatisches Erstellen eines Root-Layouts im App Router
    • Dieses Verhalten wird derzeit nicht unterstützt, da es Eingabedateien verändert. Stattdessen wird ein Fehler angezeigt, damit Sie ein Root-Layout manuell am gewünschten Ort hinzufügen können.
  • @next/font (Legacy-Schriftunterstützung)
    • @next/font ist veraltet zugunsten von next/font. next/font wird mit Turbopack vollständig unterstützt.
  • Relay-Transformationen
    • Wir planen, dies in Zukunft zu implementieren.
  • Blockieren von .css-Importen in pages/_document.tsx
    • Derzeit blockiert webpack in Next.js das Importieren von .css-Dateien in pages/_document.tsx
    • Wir planen, diese Warnung in Zukunft zu implementieren.
  • experimental.typedRoutes
    • Wir planen, dies in Zukunft zu implementieren.
  • experimental.nextScriptWorkers
    • Wir planen, dies in Zukunft zu implementieren.
  • experimental.sri.algorithm
    • Wir planen, dies in Zukunft zu implementieren.
  • experimental.fallbackNodePolyfills
    • Wir planen, dies in Zukunft zu implementieren.
  • experimental.esmExternals
    • Wir planen derzeit nicht, die Legacy-esmExternals-Konfiguration in Next.js mit Turbopack zu unterstützen.
  • AMP
    • Wir planen derzeit nicht, AMP in Next.js mit Turbopack zu unterstützen.
  • Yarn PnP
    • Wir planen derzeit nicht, Yarn PnP in Next.js mit Turbopack zu unterstützen.
  • experimental.urlImports
    • Wir planen derzeit nicht, experimental.urlImports in Next.js mit Turbopack zu unterstützen.
  • :import und :export ICSS-Regeln
    • Wir planen derzeit nicht, :import- und :export-ICSS-Regeln in Next.js mit Turbopack zu unterstützen, da Lightning CSS, der von Turbopack verwendete CSS-Parser, diese Regeln nicht unterstützt.
  • unstable_allowDynamic-Konfiguration in Edge-Runtime

Generieren von Trace-Dateien

Trace-Dateien ermöglichen es dem Next.js-Team, Leistungsmetriken und Speicherauslastung zu untersuchen und zu verbessern. Um eine Trace-Datei zu generieren, hängen Sie NEXT_TURBOPACK_TRACING=1 an den Befehl next dev --turbopack an. Dies generiert eine .next/trace.log-Datei.

Wenn Sie Probleme im Zusammenhang mit der Leistung und Speicherauslastung von Turbopack melden, fügen Sie bitte die Trace-Datei in Ihrem GitHub-Issue bei.