turbo

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

TypeScript

next.config.ts

import type { NextConfig } from 'next'

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

export default nextConfig

JavaScript

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の割り当て
useSwcCss	Turbopackに対してlightningcssの代わりにswc_cssを使用する
treeshaking	turbopackの開発サーバーとビルドに対するツリーシェイキングを有効にする
memoryLimit	ターボのターゲットメモリ制限（バイト単位）

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

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

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

例

webpackローダーの設定

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

• 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の代わりに*.mdx）。

エイリアスの解決

Turbopackは、aliasesを通じてモジュール解決を修正するように設定できます。これは、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'はlodashモジュールを読み込み、underscoreの代わりにlodashを読み込むことになります。

Turbopackは、このフィールドを通じて条件付きのエイリアスをサポートしており、Node.jsのconditional exportsに似ています。 現時点でサポートされているのはbrowser条件のみです。上記の場合、ブラウザー環境をターゲットにする際には、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',
      ],
    },
  },
}

これにより、元の解決拡張子が提供されたリストに上書きされます。 デフォルトの拡張子を含めるようにしてください。

Turbopackからwebpackへのマイグレーションに関する詳細情報とガイダンスについては、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が導入されました。