Next.js のアプリに含まれる next/babel
プリセットは、React アプリケーションや、サーバーサイドのコードをコンパイルに必要なすべてのことが含まれます。ですが、デフォルトの Babel 設定を拡張したい場合は、それも可能です。
開始するには、アプリのトップに .babelrc
(か babel.config.js
) を置くだけです。もし、そのようなファイルを見つけた場合信頼できるソースだとみなされるため、Next.js も同様に必要とする next/babel
プリセットを定義する必要があります。
こちらが .babelrc
ファイルの例です:
{
"presets": ["next/babel"],
"plugins": []
}
next/babel
はプリセットを含みます:
これらの 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 のコード分割はされません。