Introduction/Architecture/Turbopack

Turbopack

Turbopack (bêta) est un bundler incrémental optimisé pour JavaScript et TypeScript, écrit en Rust, et intégré à Next.js.

Utilisation

Turbopack peut être utilisé dans Next.js à la fois dans les répertoires pages et app pour un développement local plus rapide. Pour activer Turbopack, utilisez le flag --turbo lors de l'exécution du serveur de développement Next.js.

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

Fonctionnalités prises en charge

Turbopack dans Next.js ne nécessite aucune configuration pour la plupart des utilisateurs et peut être étendu pour des cas d'utilisation plus avancés. Pour en savoir plus sur les fonctionnalités actuellement prises en charge par Turbopack, consultez la Référence API.

Fonctionnalités non prises en charge

Turbopack ne prend actuellement en charge que next dev et ne prend pas en charge next build. Nous travaillons actuellement à la prise en charge des builds alors que nous nous rapprochons de la stabilité.

Ces fonctionnalités ne sont actuellement pas prises en charge :

  • Configuration webpack() dans next.config.js
    • Turbopack remplace Webpack, ce qui signifie que la configuration Webpack n'est pas prise en charge.
    • Pour configurer Turbopack, consultez la documentation.
    • Un sous-ensemble de chargeurs Webpack est pris en charge dans Turbopack.
  • Babel (.babelrc)
    • Turbopack utilise le compilateur SWC pour toutes les transpilations et optimisations. Cela signifie que Babel n'est pas inclus par défaut.
    • Si vous avez un fichier .babelrc, vous pourriez ne plus en avoir besoin car Next.js inclut des plugins Babel courants sous forme de transformations SWC qui peuvent être activées. Vous pouvez en savoir plus dans la documentation du compilateur.
    • Si vous avez toujours besoin d'utiliser Babel après avoir vérifié que votre cas d'utilisation spécifique n'est pas couvert, vous pouvez utiliser le support des chargeurs Webpack personnalisés de Turbopack pour inclure babel-loader.
  • Création automatique d'une mise en page racine dans App Router.
    • Ce comportement n'est actuellement pas pris en charge car il modifie les fichiers d'entrée. À la place, une erreur sera affichée pour vous inviter à ajouter manuellement une mise en page racine à l'emplacement souhaité.
  • @next/font (support hérité des polices).
    • @next/font est déprécié au profit de next/font. next/font est entièrement pris en charge avec Turbopack.
  • new Worker('file', import.meta.url).
    • Nous prévoyons d'implémenter cela à l'avenir.
  • Transformations Relay
    • Nous prévoyons d'implémenter cela à l'avenir.
  • experimental.nextScriptWorkers
    • Nous prévoyons d'implémenter cela à l'avenir.
  • AMP.
    • Nous ne prévoyons pas actuellement de prendre en charge AMP dans Next.js avec Turbopack.
  • Yarn PnP
    • Nous ne prévoyons pas actuellement de prendre en charge Yarn PnP dans Next.js avec Turbopack.
  • experimental.urlImports
    • Nous ne prévoyons pas actuellement de prendre en charge experimental.urlImports dans Next.js avec Turbopack.

Génération de fichiers de trace

Les fichiers de trace permettent à l'équipe Next.js d'étudier et d'améliorer les métriques de performance et l'utilisation de la mémoire. Pour générer un fichier de trace, ajoutez NEXT_TURBOPACK_TRACING=1 à la commande next dev --turbo, cela générera un fichier .next/trace.log.

Lorsque vous signalez des problèmes liés aux performances et à l'utilisation de la mémoire de Turbopack, veuillez inclure le fichier de trace dans votre issue GitHub.