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

Turbopackは、Node.jsの条件付きエクスポートと同様に、このフィールドを通じた条件付きエイリアスもサポートしています。現時点ではbrowser条件のみがサポートされています。上記の例では、mochaモジュールのインポートは、Turbopackがブラウザ環境をターゲットにしている場合に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