Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

Babel

Next.jsは、Reactアプリケーションとサーバーサイドコードをコンパイルするために必要なすべてを含むnext/babelプリセットをアプリに追加します。しかし、デフォルトのBabel設定を拡張したい場合も可能です。

プリセットとプラグインの追加

まず、プロジェクトのルートディレクトリに.babelrcファイル(またはbabel.config.js)を定義するだけです。このようなファイルが見つかった場合、それは「真実の源」と見なされるため、Next.jsに必要なnext/babelプリセットも定義する必要があります。

以下は.babelrcファイルの例です:

.babelrc
{
  "presets": ["next/babel"],
  "plugins": []
}

next/babelに含まれるプリセットについては、このファイルを参照してください。

プリセット/プラグインを設定なしで追加するには、次のようにします:

.babelrc
{
  "presets": ["next/babel"],
  "plugins": ["@babel/plugin-proposal-do-expressions"]
}

プリセットとプラグインのカスタマイズ

プリセット/プラグインをカスタム設定で追加するには、次のようにnext/babelプリセットで行います:

.babelrc
{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {},
        "transform-runtime": {},
        "styled-jsx": {},
        "class-properties": {}
      }
    ]
  ],
  "plugins": []
}

各設定で利用可能なオプションの詳細については、Babelのドキュメントサイトを参照してください。

補足

  • Next.jsは、サーバーサイドのコンパイルに現在の Node.jsバージョンを使用します。
  • "preset-env"modulesオプションはfalseに保つ必要があります。そうしないと、webpackのコード分割が無効になります。