Babel

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

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

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

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