turbo (experimental)

Turbopack puede personalizarse para transformar diferentes archivos y cambiar cómo se resuelven los módulos.

Es bueno saber:

• Estas características son experimentales y solo funcionarán con next --turbo.
• Turbopack para Next.js no requiere loaders ni configuración de loaders para funcionalidades integradas. Turbopack tiene soporte incorporado para CSS y compilación de JavaScript moderno, por lo que no se necesitan css-loader, postcss-loader o babel-loader si estás usando @babel/preset-env.

Loaders de webpack

Si necesitas soporte de loaders más allá de lo integrado, muchos loaders de webpack ya funcionan con Turbopack. Actualmente existen algunas limitaciones:

• Solo se implementa un subconjunto básico de la API de loaders de webpack. Actualmente hay suficiente cobertura para algunos loaders populares, y expandiremos nuestro soporte de API en el futuro.
• Solo se admiten loaders que devuelven código JavaScript. Loaders que transforman archivos como hojas de estilo o imágenes no están soportados actualmente.
• Las opciones pasadas a los loaders de webpack deben ser primitivas de JavaScript simples, objetos y arrays. Por ejemplo, no es posible pasar módulos de plugins requeridos con require() como valores de opciones.

Para configurar loaders, añade los nombres de los loaders que has instalado y cualquier opción en next.config.js, mapeando extensiones de archivo a una lista de loaders:

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

Es bueno saber: Antes de la versión 13.4.4 de Next.js, experimental.turbo.rules se llamaba experimental.turbo.loaders y solo aceptaba extensiones de archivo como .mdx en lugar de *.mdx.

Loaders soportados

Los siguientes loaders han sido probados y funcionan con la implementación de loaders de webpack en Turbopack:

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

Alias de resolución

A través de next.config.js, Turbopack puede configurarse para modificar la resolución de módulos mediante alias, similar a la configuración resolve.alias de webpack.

Para configurar alias de resolución, mapea patrones importados a su nuevo destino en next.config.js:

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

Esto crea un alias para las importaciones del paquete underscore al paquete lodash. En otras palabras, import underscore from 'underscore' cargará el módulo lodash en lugar de underscore.

Turbopack también soporta alias condicionales a través de este campo, similar a las exportaciones condicionales de Node.js. Por ahora solo se soporta la condición browser. En el caso anterior, las importaciones del módulo mocha se aliasearán a mocha/browser-entry.js cuando Turbopack tenga como objetivo entornos de navegador.

Extensiones de resolución

A través de next.config.js, Turbopack puede configurarse para resolver módulos con extensiones personalizadas, similar a la configuración resolve.extensions de webpack.

Para configurar extensiones de resolución, usa el campo resolveExtensions en next.config.js:

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

Esto sobrescribe las extensiones de resolución originales con la lista proporcionada. Asegúrate de incluir las extensiones por defecto.

Para más información y orientación sobre cómo migrar tu aplicación de webpack a Turbopack, consulta la documentación de Turbopack sobre compatibilidad con webpack.