Babel

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, иначе разделение кода webpack отключено.