turbo

L'option turbopack vous permet de personnaliser Turbopack pour transformer différents fichiers et modifier la résolution des modules.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  turbopack: {
    // ...
  },
}

export default nextConfig

Bon à savoir :

• Turbopack pour Next.js ne nécessite pas de loaders ni de configuration de loaders pour les fonctionnalités intégrées. Turbopack prend en charge nativement le CSS et la compilation de JavaScript moderne, il n'est donc pas nécessaire d'utiliser css-loader, postcss-loader ou babel-loader si vous utilisez @babel/preset-env.

Référence

Options

Les options suivantes sont disponibles pour la configuration turbo :

Loaders pris en charge

Les loaders suivants ont été testés et fonctionnent avec l'implémentation des loaders webpack de Turbopack, mais de nombreux autres loaders webpack devraient également fonctionner même s'ils ne sont pas listés ici :

• babel-loader
• @svgr/webpack
• svg-inline-loader
• yaml-loader
• string-replace-loader
• raw-loader
• sass-loader
• graphql-tag/loader

Exemples

Répertoire racine

Turbopack utilise le répertoire racine pour résoudre les modules. Les fichiers en dehors de la racine du projet ne sont pas résolus.

Next.js détecte automatiquement le répertoire racine de votre projet. Il le fait en recherchant l'un de ces fichiers :

• pnpm-lock.yaml
• package-lock.json
• yarn.lock
• bun.lock
• bun.lockb

Si vous avez une structure de projet différente, par exemple si vous n'utilisez pas de workspaces, vous pouvez définir manuellement l'option root :

const path = require('path')
module.exports = {
  turbopack: {
    root: path.join(__dirname, '..'),
  },
}

Configuration des loaders webpack

Si vous avez besoin d'une prise en charge des loaders au-delà de ce qui est intégré, de nombreux loaders webpack fonctionnent déjà avec Turbopack. Il existe actuellement certaines limitations :

• Seul un sous-ensemble de l'API des loaders webpack est implémenté. Actuellement, cela couvre suffisamment certains loaders populaires, et nous étendrons notre prise en charge de l'API à l'avenir.
• Seuls les loaders qui retournent du code JavaScript sont pris en charge. Les loaders qui transforment des fichiers comme des feuilles de style ou des images ne sont pas pris en charge actuellement.
• Les options passées aux loaders webpack doivent être des primitives JavaScript simples, des objets et des tableaux. Par exemple, il n'est pas possible de passer des modules de plugins require() comme valeurs d'options.

Pour configurer les loaders, ajoutez les noms des loaders que vous avez installés et toutes les options dans next.config.js, en mappant les extensions de fichiers à une liste de loaders.

Voici un exemple ci-dessous utilisant le loader @svgr/webpack, qui permet d'importer des fichiers .svg et de les afficher comme des composants React.

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
}

Pour les loaders nécessitant des options de configuration, vous pouvez utiliser un format objet au lieu d'une chaîne :

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: [
          {
            loader: '@svgr/webpack',
            options: {
              icon: true,
            },
          },
        ],
        as: '*.js',
      },
    },
  },
}

Bon à savoir : Avant la version 13.4.4 de Next.js, turbo.rules s'appelait turbo.loaders et n'acceptait que des extensions de fichiers comme .mdx au lieu de *.mdx.

Résolution des alias

Turbopack peut être configuré pour modifier la résolution des modules via des alias, similairement à la configuration resolve.alias de webpack.

Pour configurer les alias de résolution, mappez les modèles importés vers leur nouvelle destination dans next.config.js :

module.exports = {
  turbopack: {
    resolveAlias: {
      underscore: 'lodash',
      mocha: { browser: 'mocha/browser-entry.js' },
    },
  },
}

Cela alias les imports du package underscore vers le package lodash. En d'autres termes, import underscore from 'underscore' chargera le module lodash au lieu de underscore.

Turbopack prend également en charge l'alias conditionnel via ce champ, similairement aux exports conditionnels de Node.js. Actuellement, seule la condition browser est prise en charge. Dans le cas ci-dessus, les imports du module mocha seront aliasés vers mocha/browser-entry.js lorsque Turbopack cible des environnements navigateur.

Résolution des extensions personnalisées

Turbopack peut être configuré pour résoudre les modules avec des extensions personnalisées, similairement à la configuration resolve.extensions de webpack.

Pour configurer les extensions de résolution, utilisez le champ resolveExtensions dans next.config.js :

module.exports = {
  turbopack: {
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],
  },
}

Cela remplace les extensions de résolution originales par la liste fournie. Assurez-vous d'inclure les extensions par défaut.

Pour plus d'informations et de conseils sur la migration de votre application vers Turbopack depuis webpack, consultez la documentation de Turbopack sur la compatibilité avec webpack.

Historique des versions