turbopack

La opción turbopack te permite personalizar Turbopack para transformar diferentes archivos y cambiar cómo se resuelven los módulos.

import type { NextConfig } from 'next'

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

export default nextConfig

Es bueno saber:

• 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 necesitas css-loader, postcss-loader o babel-loader si estás usando @babel/preset-env.

Referencia

Opciones

Las siguientes opciones están disponibles para la configuración de turbo:

Loaders soportados

Los siguientes loaders han sido probados y funcionan con la implementación de loader de webpack en Turbopack, aunque muchos otros loaders de webpack también podrían funcionar aunque no estén listados aquí:

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

Ejemplos

Directorio raíz

Turbopack usa el directorio raíz para resolver módulos. Los archivos fuera del directorio raíz del proyecto no se resuelven.

Next.js detecta automáticamente el directorio raíz de tu proyecto. Lo hace buscando uno de estos archivos:

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

Si tienes una estructura de proyecto diferente, por ejemplo si no usas workspaces, puedes establecer manualmente la opción root:

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

Configuración de loaders de webpack

Si necesitas soporte de loaders más allá de lo integrado, muchos loaders de webpack ya funcionan con Turbopack. Actualmente hay 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 ampliaremos nuestro soporte de API en el futuro.
• Solo se soportan loaders que devuelven código JavaScript. Los 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 con require() como valores de opción.

Para configurar loaders, agrega 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.

Aquí hay un ejemplo usando el loader @svgr/webpack, que permite importar archivos .svg y renderizarlos como componentes de React.

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

Para loaders que requieren opciones de configuración, puedes usar un formato de objeto en lugar de una cadena:

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

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

Resolución de alias

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 = {
  turbopack: {
    resolveAlias: {
      underscore: 'lodash',
      mocha: { browser: 'mocha/browser-entry.js' },
    },
  },
}

Esto asigna 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. Actualmente solo se soporta la condición browser. En el caso anterior, las importaciones del módulo mocha se asignarán a mocha/browser-entry.js cuando Turbopack tenga como destino entornos de navegador.

Resolución de extensiones personalizadas

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 = {
  turbopack: {
    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 predeterminadas.

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

Historial de versiones