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