Next.jsでのBabel設定方法

Next.jsには、Reactアプリケーションとサーバーサイドコードのコンパイルに必要なすべてが含まれるnext/babelプリセットがアプリケーションに含まれています。しかし、デフォルトの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のコード分割が無効になります。