turbo

turboオプションを使用すると、さまざまなファイルを変換し、モジュールの解決方法を変更するためにTurbopackをカスタマイズできます。

TypeScript
JavaScript

next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    turbo: {
      // ...
    },
  },
}

export default nextConfig

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      // ...
    },
  },
}

module.exports = nextConfig

Good to know:

Next.jsのTurbopackは、組み込み機能に対してローダーやローダー設定を必要としません。TurbopackはCSSと最新のJavaScriptのコンパイルをサポートしているため、@babel/preset-envを使用している場合、css-loader、postcss-loader、babel-loaderは不要です。

参照

オプション

turbo設定で利用可能なオプションは次のとおりです：

オプション	説明
`rules`	Turbopackを使用して実行する際に適用する、サポートされていないwebpackローダーのリスト
`resolveAlias`	エイリアス化されたインポートをモジュールにマップし、それらをロードします
`resolveExtensions`	ファイルをインポートする際に解決する拡張子のリスト
`moduleIdStrategy`	モジュールIDを割り当てます
`treeShaking`	turbopackの開発サーバーとビルドのためのtree shakingを有効にします
`memoryLimit`	turboのターゲットメモリ制限（バイト単位）

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

次のローダーは、Turbopackのwebpackローダー実装で動作することが確認されています：

例

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',
        },
      },
    },
  },
}

Good to know: Next.jsバージョン13.4.4以前では、turbo.rulesはturbo.loadersと呼ばれ、.mdxのようなファイル拡張子のみを受け入れていました。

エイリアスの解決

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条件のみがサポートされています。上記の例では、Turbopackがブラウザ環境をターゲットにする場合、mochaモジュールのインポートはmocha/browser-entry.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互換性に関するドキュメントを参照してください。

モジュールIDの割り当て

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

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

設定されていない場合、Turbopackは開発ビルドには'named'を、プロダクションビルドには'deterministic'を使用します。

モジュールID戦略を設定するには、next.config.jsのmoduleIdStrategyフィールドを使用します：

next.config.js
module.exports = {
  experimental: {
    turbo: {
      moduleIdStrategy: 'deterministic',
    },
  },
}

バージョン履歴

バージョン	変更点
`13.0.0`	`experimental.turbo`が導入されました。

参照​

オプション​

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

例​

webpackローダーの設定​

エイリアスの解決​

カスタム拡張子の解決​

モジュールIDの割り当て​

バージョン履歴​

参照