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ローダー実装で動作することが確認されていますが、ここにリストされていない多くのwebpackローダーも動作する可能性があります:

• babel-loader
• @svgr/webpack
• svg-inline-loader
• yaml-loader
• string-replace-loader
• raw-loader
• sass-loader
• graphql-tag/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に追加し、ファイル拡張子をローダーのリストにマッピングします。

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

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

設定オプションを必要とするローダーの場合は、文字列の代わりにオブジェクト形式を使用できます:

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: [
          {
            loader: '@svgr/webpack',
            options: {
              icon: true,
            },
          },
        ],
        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条件のみがサポートされています。上記の例では、mochaモジュールのインポートは、Turbopackがブラウザ環境をターゲットにしている場合、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互換性に関するドキュメントを参照してください。

バージョン履歴