turbo（実験的機能）

警告: これらの機能は実験的であり、next --turboを使用時のみ動作します。

webpackローダー

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

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

module.exports = {
  experimental: {
    turbo: {
      rules: {
        // オプション付き形式
        '*.md': [
          {
            loader: '@mdx-js/loader',
            options: {
              format: 'md',
            },
          },
        ],
        // オプションなし形式
        '*.mdx': ['@mdx-js/loader'],
      },
    },
  },
}

上記の設定を行った後、アプリから変換されたコードを使用できます：

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

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

エイリアスの解決

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

解決エイリアスを設定するには、インポートパターンを新しい宛先にマッピングします：

module.exports = {
  experimental: {
    turbo: {
      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にエイリアスされます。

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