turbo (expérimental)

Turbopack peut être personnalisé pour transformer différents fichiers et modifier la résolution des modules.

Bon à savoir :

• Ces fonctionnalités sont expérimentales et ne fonctionneront qu'avec next --turbo.
• Turbopack pour Next.js ne nécessite pas de loaders ni de configuration de loader pour les fonctionnalités intégrées. Turbopack prend en charge nativement le CSS et la compilation de JavaScript moderne, donc il n'y a pas besoin de css-loader, postcss-loader ou babel-loader si vous utilisez @babel/preset-env.

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 central 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 renvoient 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 chargés avec require() comme valeurs d'options.

Pour configurer les loaders, ajoutez les noms des loaders que vous avez installés ainsi que leurs options dans next.config.js, en associant les extensions de fichiers à une liste de loaders :

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

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

Loaders pris en charge

Les loaders suivants ont été testés et fonctionnent avec l'implémentation des loaders webpack de Turbopack :

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

Alias de résolution

Via next.config.js, Turbopack peut être configuré pour modifier la résolution des modules via des alias, similaire à la configuration resolve.alias de webpack.

Pour configurer les alias de résolution, associez les motifs importés à leur nouvelle destination dans next.config.js :

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

Cela crée un alias pour 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, similaire aux exports conditionnels de Node.js. Pour le moment, seule la condition browser est prise en charge. Dans l'exemple ci-dessus, les imports du module mocha seront aliasés vers mocha/browser-entry.js lorsque Turbopack cible des environnements navigateur.

Extensions de résolution

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

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

module.exports = {
  experimental: {
    turbo: {
      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 des conseils sur la migration de votre application vers Turbopack depuis webpack, consultez la documentation de Turbopack sur la compatibilité avec webpack.