turbo (Experimental)

注意：これらの機能は実験的なもので、next --turboでのみ機能します。

webpack ローダー

現在、Turbopack は webpack のローダー API のサブセットをサポートしており、いくつかの webpack ローダーを使って Turbopack のコードを変換できます。

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

next.config.js
module.exports = {
  experimental: {
    turbo: {
      loaders: {
        // オプションありの形式
        '.md': [
          {
            loader: '@mdx-js/loader',
            options: {
              format: 'md',
            },
          },
        ],
        // オプションなしの形式
        '.mdx': ['@mdx-js/loader'],
      },
    },
  },
}

上記の設定があれば、アプリケーションから変換されたコードを使うことができます：

import MyDoc from './my-doc.mdx'

export default function Home() {
  return <MyDoc />
}

Resolve Alias

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

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

next.config.js
module.exports = {
  experimental: {
    turbo: {
      resolveAlias: {
        underscore: 'lodash',
        mocha: { browser: 'mocha/browser-entry.js' },
      },
    },
  },
}

これはunderscoreパッケージのインポートをlodashパッケージにエイリアスします。言い換えると、import underscore from 'underscore'はunderscoreの代わりにlodashモジュールをロードします。

Turbopack は、Node.js の条件付きエクスポートのように、このフィールドを使った条件付きエイリアスもサポートしています。現時点ではブラウザの条件のみがサポートされています。上記の場合、Turbopack がブラウザ環境をターゲットにしている場合、mochaモジュールのインポートはmocha/browser-entry.jsにエイリアスされます。

webpack から Turbopack への移行方法については、Turbopack の webpack との互換性に関するドキュメントを参照してください。

webpack ローダー​

Resolve Alias​

webpack ローダー

Resolve Alias