Babel 設定のカスタマイズ

例

• Babel 設定のカスタマイズ

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

開始するには、アプリのトップに .babelrc (か babel.config.js) を置くだけです。もし、そのようなファイルを見つけた場合信頼できるソースだとみなされるため、Next.js も同様に必要とする next/babel プリセットを定義する必要があります。

こちらが .babelrc ファイルの例です:

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

next/babel はプリセットを含みます:

• preset-env
• preset-react
• preset-typescript
• plugin-proposal-class-properties
• plugin-proposal-object-rest-spread
• plugin-transform-runtime
• styled-jsx

これらの presets/plugins を設定する場合、カスタムした .babelrc の presets や plugins を追加しないでください。その代わり、next/babel プリセットでこのように設定します:

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

各設定で、利用可能なオプションについてはドキュメントサイトにご覧ください。

Next.js は、サーバーサイドのコンパイルに現在の Node.js のバージョンを使用します。

"preset-env" の modules オプションは false にすべきで、そうでなければ、webpack のコード分割はされません。