turbo (experimental)

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

webpack loaders

現在、Turbopack は webpack の loader API の一部をサポートしており、一部の webpack ローダーを使用して Turbopack 内で transform code を行うことができます。

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

module.exports = {
  experimental: {
    turbo: {
      rules: {
        // Option format
        '*.md': [
          {
            loader: '@mdx-js/loader',
            options: {
              format: 'md',
            },
          },
        ],
        // Option-less format
        '*.mdx': ['@mdx-js/loader'],
      },
    },
  },
}

それでは、上記の設定が与えられた場合、あなたは自身の app から変換された code を使用することができます：

import MyDoc from "./my-doc.mdx";

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

Resolve Alias

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

next.config.jsでリゾルブエイリアスを設定するには、インポートされたパターンを新しい destination に map します。

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

このエイリアスはunderscoreパッケージのインポートをlodashパッケージに変更します。つまり、import underscore from 'underscore'とすると、underscoreではなくlodashモジュールがロードされます。

Turbopack は、Node.js の条件付き export と同様に、このフィールドを通じて条件付きエイリアスをサポートしています。現時点では、browser条件のみがサポートされています。上記のケースでは、mochaモジュールのインポートは、Turbopack がブラウザ環境を対象とする場合、mocha/browser-entry.jsにエイリアス化されます。

Resolve Extensions

next.config.jsを通じて、Turbopack は、webpack のresolve.extensions 設定と同様に、カスタム拡張子を持つ modules を解決するように設定することができます。

resolve extension を設定するには、next.config.js内のresolveExtensionsフィールドを使用します：

module.exports = {
  experimental: {
    turbo: {
      resolveExtensions: [
        '.mdx',
        '.tsx',
        '.ts',
        '.jsx',
        '.js',
        '.mjs',
        '.json',
      ],
    },
  },
}

これにより、元の resolve 拡張機能が提供されたリストで上書きされます。default 拡張機能を含めるように注意してください。

詳細な情報と、あなたの app を webpack から Turbopack に移行する方法についてのガイダンスは、Turbopack の webpack 互換性に関するドキュメンテーション をご覧ください。