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 構成には次のオプションを使用できます。

サポートされているローダー

次のローダーは、Turbopack の webpack ローダー実装で動作することがテストされています。

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

例

webpackローダーの設定

組み込みのサポートを超えるローダーサポートが必要な場合、多くの webpack ローダーはすでに Turbopack で動作します。現在、いくつかの制限事項があります。

• webpack ローダー API のコアサブセットのみが実装されています。現在、いくつかの一般的なローダーに対して十分なカバレッジがあり、将来的には API サポートを拡張する予定です。
• JavaScript コードを返すローダーのみがサポートされています。スタイルシートや画像などのファイルを変換するローダーは、現在サポートされていません。
• webpack ローダーに渡されるオプションは、プレーンな JavaScript プリミティブ、オブジェクト、および配列である必要があります。たとえば、require()プラグインモジュールをオプション値として渡すことはできません。

ローダーを設定するには、インストールしたローダーの名前とオプションをnext.config.jsに追加し、ファイル拡張子をローダーのリストにマッピングします。

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' は underscore ではなく lodash モジュールをロードします。

Turbopack は、Node.js の conditional exportsと同様に、このフィールドを使用して条件付きエイリアスもサポートしています。現時点では、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 に移行する方法の詳細とガイダンスについては、webpack 互換性に関する Turbopack のドキュメント を参照してください。

モジュール ID の割り当て

Turbopack は現在、モジュール ID を割り当てるための 2 つの戦略をサポートしています。

• 'named' は、モジュールのパスと機能に基づいて、読み取り可能なモジュール ID を割り当てます。
• 'deterministic' は、ビルド間でほぼ一貫性があり、長期的なキャッシュに役立つ、小さなハッシュ化された数値モジュール ID を割り当てます。

設定されていない場合、Turbopack は開発ビルドには 'named' を使用し、本番ビルドには 'deterministic' を使用します。

モジュール ID 戦略を構成するには、next.config.js で moduleIdStrategy フィールドを使用します。

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

バージョン履歴