Turbo

turbo 選項可讓您自訂 Turbopack 以轉換不同的檔案並變更模組的解析方式。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  turbo: {
    // ...
  },
}
 
export default nextConfig

注意事項:

• 適用於 Next.js 的 Turbopack 不需要載入器或載入器設定即可使用內建功能。Turbopack 內建支援 CSS 和編譯現代 JavaScript，因此如果您使用 @babel/preset-env，則不需要 css-loader、postcss-loader 或 babel-loader。

參考

選項

以下選項適用於 turbo 設定

支援的載入器babel-loader

@svgr/webpack

svg-inline-loader

yaml-loader

string-replace-loader

raw-loader

sass-loader

範例

設定 webpack loader

如果您需要內建功能以外的 loader 支援，許多 webpack loader 已經可以與 Turbopack 搭配使用。目前有一些限制。

• 僅實作了 webpack loader API 的核心子集。目前，已涵蓋一些常用的 loader，我們未來會擴展 API 支援。
• 僅支援返回 JavaScript 程式碼的 loader。目前不支援轉換樣式表或圖片等檔案的 loader。
• 傳遞給 webpack loader 的選項必須是純 JavaScript 基本型別、物件和陣列。例如，無法傳遞 require() 外掛模組作為選項值。

要設定 loader，請在 next.config.js 中新增已安裝的 loader 名稱和任何選項，將檔案副檔名對應到 loader 列表。

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

注意事項：在 Next.js 13.4.4 版之前，turbo.rules 的名稱是 turbo.loaders，並且只接受像 .mdx 而不是 *.mdx 的檔案副檔名。

解析別名

可以設定 Turbopack，透過別名修改模組解析，類似於 webpack 的 resolve.alias 設定。

要設定解析別名，請在 next.config.js 中將匯入的模式對應到它們的新目的地。

module.exports = {
  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 的別名。

解析自訂副檔名

可以設定 Turbopack 來解析具有自訂副檔名的模組，類似於 webpack 的resolve.extensions設定。

要設定解析副檔名，請在 next.config.js 中使用 resolveExtensions 欄位。

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

這會使用提供的清單覆寫原始的解析副檔名。請務必包含預設的副檔名。

有關如何將您的應用程式從 webpack 遷移到 Turbopack 的更多資訊和指南，請參閱Turbopack 關於 webpack 相容性的說明文件。

指定模組 ID

Turbopack 目前支援兩種指定模組 ID 的策略：

• 'named' 根據模組的路徑和功能指定可讀的模組 ID。
• 'deterministic' 指定簡短的雜湊數值模組 ID，這些 ID 在不同版本之間大致保持一致，因此有助於長期快取。

如果未設定，Turbopack 將在開發建置時使用 'named'，在正式建置時使用 'deterministic'。

要設定模組 ID 策略，請在 next.config.js 中使用 moduleIdStrategy 欄位。

module.exports = {
  turbo: {
    moduleIdStrategy: 'deterministic',
  },
}

版本歷史記錄