turbo (實驗性功能)

Turbopack 可自訂以轉換不同檔案並變更模組解析方式。

須知事項:

這些功能屬於實驗性質，僅在執行 next --turbo 時有效。

Next.js 的 Turbopack 對於內建功能不需要載入器 (loader) 或載入器設定。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