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

バージョン履歴