turbo

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

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    turbo: {
      // ...
    },
  },
}
 
export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      // ...
    },
  },
}
 
module.exports = 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 = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
}

補足: Next.js version 13.4.4より前は、turbo.rulesはturbo.loadersという名前で、.mdxのようなファイル拡張子のみを受け入れていました。

エイリアスの解決

Turbopackは、webpack の resolve.alias 設定に似た、エイリアスを通じてモジュール解決を変更するように設定できます。

エイリアスを解決するには、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がブラウザEnvironmentをターゲットにする際、mochaモジュールのインポートはmocha/browser-entry.jsにエイリアス化されます。

カスタム拡張子の解決

Turbopackは、webpack の resolve.extensions 設定に似た、カスタム拡張子を持つモジュールを解決するように設定できます。

拡張子を解決するには、next.config.jsのresolveExtensionsフィールドを使用します：

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フィールドを使用します：

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

バージョン履歴