turbopack

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

TypeScript
JavaScript

next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  turbopack: {
    // ...
  },
}

export default nextConfig

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  turbopack: {
    // ...
  },
}

module.exports = nextConfig

Good to know:

Next.jsのTurbopackは、組み込み機能に対してローダーやローダー設定を必要としません。TurbopackはCSSと最新のJavaScriptのコンパイルをサポートしているため、@babel/preset-envを使用している場合、css-loader、postcss-loader、babel-loaderは不要です。

参照

オプション

turbopackの設定には、次のオプションがあります：

オプション	説明
`root`	アプリケーションのrootディレクトリを設定します。絶対パスである必要があります。
`rules`	Turbopackを使用する際に適用されるサポートされているwebpackローダーのリストです。
`resolveAlias`	エイリアス化されたインポートをモジュールにマッピングして、それらを読み込む場所を変更します。
`resolveExtensions`	ファイルをインポートする際に解決する拡張子のリストです。

サポートされているローダー

次のローダーは、Turbopackのwebpackローダー実装で動作することが確認されています：

例

Rootディレクトリ

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

Next.jsはプロジェクトのrootディレクトリを自動的に検出します。以下のファイルのいずれかを探すことで行います：

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

異なるプロジェクト構造を持っている場合、例えばワークスペースを使用していない場合は、rootオプションを手動で設定できます：

next.config.js
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ローダーを使用した例です。

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

Good to know: Next.jsバージョン13.4.4以前では、turbo.rulesはturbo.loadersと呼ばれ、*.mdxの代わりに.mdxのようなファイル拡張子のみを受け入れていました。

エイリアスの解決

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

エイリアスを解決するには、インポートされたパターンをnext.config.jsで新しい宛先にマッピングします：

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

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

これにより、元の解決拡張子が提供されたリストで上書きされます。デフォルトの拡張子を含めることを忘れないでください。

Turbopackへの移行に関する詳細情報とガイダンスについては、Turbopackのwebpack互換性に関するドキュメントを参照してください。

バージョン履歴

バージョン	変更点
`15.3.0`	`experimental.turbo`が`turbopack`に変更されました。
`13.0.0`	`experimental.turbo`が導入されました。

参照​

オプション​

サポートされているローダー​

例​

Rootディレクトリ​

webpackローダーの設定​

エイリアスの解決​

カスタム拡張子の解決​

バージョン履歴​

参照