Babel

Next.js は、あなたの app にnext/babelプリセットを含めています。これには React アプリケーションや server-side code をコンパイルするために必要な全てが含まれています。しかし、もしあなたが default Babel の設定を拡張したい場合には、それも可能です。

Adding Presets and Plugins

start するには、プロジェクトの root ディレクトリに .babelrc ファイル(または babel.config.js)を定義するだけでよいです。そのようなファイルが見つかった場合、それは source of truthと見なされ、したがって、next/babel プリセットとして Next.js が必要とするものを定義する必要があります。

ここに .babelrc ファイルの例があります：

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

このファイルを参照して 、next/babelに含まれているプリセットについて学べます。

プリセット/プラグインを設定せずに追加するには、この方法で行うことができます：

{
  "presets": ["next/babel"],
  "plugins": ["@babel/plugin-proposal-do-expressions"]
}

Customizing Presets and Plugins

カスタム設定を備えたプリセット/プラグインを追加するには、next/babelプリセットで次のように行います：

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

各々の config に対する利用可能な options について詳しく学びたいなら、babel のdocumentation サイトを訪れてください。

Good to know:

• Next.js は、 現行の Node.js version を server-side のコンパイルに使用します。
• "preset-env"にあるmodulesオプションはfalseに保持すべきです、そうでないと webpack code の分割がオフになります。