Next.jsでBabelを設定する方法

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

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

まず、プロジェクトのルートディレクトリに.babelrcファイル（またはbabel.config.js）を定義するだけです。このようなファイルが見つかると、それが_信頼できる情報源_とみなされるため、Next.jsが必要とするnext/babelプリセットも定義する必要があります。

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

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

next/babelに含まれるプリセットについては、このファイルを確認できます。

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

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

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

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

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

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

補足:

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