Настройка Babel в Next.js

Next.js включает пресет next/babel для вашего приложения, который содержит всё необходимое для компиляции React-приложений и серверного кода. Однако если вы хотите расширить стандартные настройки Babel, это также возможно.

Добавление пресетов и плагинов

Для начала достаточно создать файл .babelrc (или babel.config.js) в корневой директории проекта. Если такой файл будет обнаружен, он будет считаться источником истины, поэтому в нём необходимо определить то, что требуется Next.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 для серверной компиляции.
• Опция modules в "preset-env" должна оставаться false, иначе будет отключено разделение кода (code splitting) в webpack.