Next.jsでBabelを設定する方法
Next.jsには、Reactアプリケーションとサーバーサイドコードをコンパイルするために必要なすべてを含むnext/babel
プリセットが含まれています。しかし、デフォルトのBabel設定を拡張したい場合も可能です。
プリセットとプラグインの追加
開始するには、プロジェクトのルートディレクトリに.babelrc
ファイル(またはbabel.config.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のコード分割が無効になります。