turbo

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

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  turbopack: {
    // ...
  },
}
 
export default 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

例

ルートディレクトリ

Turbopack は、モジュールを解決するためにルートディレクトリを使用します。プロジェクトルート外のファイルは解決されません。

Next.js はプロジェクトのルートディレクトリを自動的に検出します。以下のファイルを探して検出します。

• pnpm-lock.yaml
• package-lock.json
• yarn.lock
• bun.lock
• bun.lockb

別のプロジェクト構造がある場合、たとえばワークスペースを使用しない場合は、root オプションを手動で設定できます。

const path = require('path')
module.exports = {
  turbopack: {
    root: path.join(__dirname, '..'),
  },
}

webpack ローダーの設定

組み込みのローダーサポート以外にローダーサポートが必要な場合、多くの webpack ローダーはすでに Turbopack で動作します。現在、いくつかの制限があります。

• webpack ローダー API の中核的なサブセットのみが実装されています。現在、一部の人気のあるローダーには十分な対応ができており、今後 API サポートを拡大していく予定です。
• JavaScript コードを返すローダーのみがサポートされています。スタイルシートや画像などのファイルを変換するローダーは現在サポートされていません。
• webpack ローダーに渡されるオプションは、プレーンな JavaScript プリミティブ、オブジェクト、および配列である必要があります。たとえば、require() プラグインモジュールをオプション値として渡すことはできません。

ローダーを設定するには、インストールしたローダーの名前と任意のオプションを next.config.js に追加し、ファイル拡張子をローダーのリストにマップします。

以下は、@svgr/webpack ローダーを使用した例です。これにより、.svg ファイルをインポートして React コンポーネントとしてレンダリングできます。

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
}

豆知識: Next.js バージョン 13.4.4 より前では、turbo.rules は turbo.loaders という名前で、*.mdx ではなく .mdx のようなファイル拡張子のみを受け入れていました。

エイリアスの解決

Turbopack は、webpack の resolve.alias 設定と同様に、エイリアスを介してモジュール解決を変更するように設定できます。

エイリアスを解決するように設定するには、インポートされたパターンを next.config.js の新しい宛先にマップします。

module.exports = {
  turbopack: {
    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 フィールドを使用します。

module.exports = {
  turbopack: {
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],
  },
}

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

webpack から Turbopack にアプリケーションを移行する方法の詳細とガイダンスについては、Turbopack の webpack 互換性に関するドキュメントを参照してください。

バージョン履歴