turbopack

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互換性に関するドキュメントを参照してください。

バージョン履歴