Babel
Next.jsは、Reactアプリケーションとサーバーサイドコードをコンパイルするために必要なすべてを含むnext/babel
プリセットをアプリに追加します。しかし、デフォルトのBabel設定を拡張したい場合も可能です。
プリセットとプラグインの追加
まず、プロジェクトのルートディレクトリに.babelrc
ファイル(またはbabel.config.js
)を定義するだけです。このようなファイルが見つかった場合、それは「真実の源」と見なされるため、Next.jsに必要なnext/babel
プリセットも定義する必要があります。
以下は.babelrc
ファイルの例です:
.babelrc
{
"presets": ["next/babel"],
"plugins": []
}
next/babel
に含まれるプリセットについては、このファイルを参照してください。
プリセット/プラグインを設定なしで追加するには、次のようにします:
.babelrc
{
"presets": ["next/babel"],
"plugins": ["@babel/plugin-proposal-do-expressions"]
}
プリセットとプラグインのカスタマイズ
プリセット/プラグインをカスタム設定で追加するには、次のようにnext/babel
プリセットで行います:
.babelrc
{
"presets": [
[
"next/babel",
{
"preset-env": {},
"transform-runtime": {},
"styled-jsx": {},
"class-properties": {}
}
]
],
"plugins": []
}
各設定で利用可能なオプションの詳細については、Babelのドキュメントサイトを参照してください。
補足:
- Next.jsは、サーバーサイドのコンパイルに現在の Node.jsバージョンを使用します。
"preset-env"
のmodules
オプションはfalse
に保つ必要があります。そうしないと、webpackのコード分割が無効になります。