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のコード分割が無効になります。