How to configure Babel in Next.js

Next.js includes the next/babel preset to your app, which includes everything needed to compile React applications and server-side code. But if you want to extend the default Babel configs, it's also possible.

Adding Presets and Plugins

To start, you only need to define a .babelrc file (or babel.config.js) in the root directory of your project. If such a file is found, it will be considered as the source of truth, and therefore it needs to define what Next.js needs as well, which is the next/babel preset.

Here's an example .babelrc file:

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

You can take a look at this file to learn about the presets included by next/babel.

To add presets/plugins without configuring them, you can do it this way:

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

Customizing Presets and Plugins

To add presets/plugins with custom configuration, do it on the next/babel preset like so:

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

To learn more about the available options for each config, visit babel's documentation site.

Good to know:

• Next.js uses the current Node.js version for server-side compilations.
• The modules option on "preset-env" should be kept to false, otherwise webpack code splitting is turned off.