turbo

turbopackオプションを使用すると、異なるファイルを変換し、モジュールの解決方法を変更するために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は必要ありません。

参照

オプション

turbopackの設定には以下のオプションがあります：

オプション	説明
`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へのアプリの移行方法についてのガイダンスについては、Webpackの互換性に関するTurbopackのドキュメントを参照してください。

モジュール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の割り当て​

バージョン履歴​

参照