turbo (实验性功能)

可自定义 Turbopack 以转换不同文件并修改模块解析方式。

须知:

这些功能属于实验性质，仅在使用 next --turbo 时生效

Next.js 的 Turbopack 无需加载器或加载器配置即可实现内置功能。Turbopack 已内置支持 CSS 和现代 JavaScript 编译，因此若使用 @babel/preset-env 则无需配置 css-loader、postcss-loader 或 babel-loader

webpack 加载器

如需超出内置功能的加载器支持，许多 webpack 加载器已兼容 Turbopack。当前存在以下限制：

仅实现了 webpack 加载器 API 的核心子集。目前部分流行加载器已覆盖，我们将在未来扩展 API 支持
仅支持返回 JavaScript 代码的加载器。暂不支持转换样式表或图像等文件的加载器
传递给 webpack 加载器的选项必须是纯 JavaScript 原始值、对象或数组。例如，无法将 require() 引入的插件模块作为选项值传递

配置加载器时，在 next.config.js 中添加已安装的加载器名称及选项，将文件扩展名映射至加载器列表：

next.config.js

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

须知：在 Next.js 13.4.4 版本之前，experimental.turbo.rules 名为 experimental.turbo.loaders 且仅接受 .mdx 而非 *.mdx 形式的文件扩展名。

支持的加载器

以下加载器经测试可与 Turbopack 的 webpack 加载器实现兼容：

解析别名

通过 next.config.js 可配置 Turbopack 修改模块解析的别名，类似于 webpack 的 resolve.alias 配置。

配置解析别名时，在 next.config.js 中将导入模式映射至新目标：

next.config.js

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

此配置将 underscore 包的导入别名设为 lodash 包。换言之，import underscore from 'underscore' 将加载 lodash 模块而非 underscore。

Turbopack 还支持通过此字段进行条件别名配置，类似于 Node.js 的条件导出。目前仅支持 browser 条件。在上例中，当 Turbopack 目标环境为浏览器时，mocha 模块的导入将被别名替换为 mocha/browser-entry.js。

解析扩展名

通过 next.config.js 可配置 Turbopack 使用自定义扩展名解析模块，类似于 webpack 的 resolve.extensions 配置。

配置解析扩展名时，在 next.config.js 中使用 resolveExtensions 字段：

next.config.js

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

这将用提供的列表覆盖原始解析扩展名。请确保包含默认扩展名。

有关从 webpack 迁移至 Turbopack 的更多信息和指南，请参阅 Turbopack 的 webpack 兼容性文档。

webpack 加载器

支持的加载器

解析别名

解析扩展名

On this page