【Next.js和訳】Advanced Features/Customizing Babel Config

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、Advanced Features/Customizing Babel Configの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Customizing Babel Config

例 | Example

• Customizing babel configuration

Next.jsには、Reactアプリケーションやサーバーサイドのコードをコンパイルするために必要なものがすべて含まれているnext/babelプリセットがアプリに含まれています。

しかし、デフォルトのBabelコンフィグを拡張したい場合は、それも可能です。

アプリのトップに .babelrc ファイル (または babel.config.js) を定義するだけです。

.babelrcファイルがあれば、そのファイルが優先して適用されるため、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": []
}

各コンフィグで利用可能なオプションの詳細については、各コンフィグのドキュメントサイトをご覧ください。

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

preset-envのmodulesオプションをfalseにしておかないと、webpackのコード分割がオフになってしまいます。