Customizing Babel Config

Examples

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.

To start, you only need to define a .babelrc file (or babel.config.js) at the top of your app. 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:

  1. {
  2.   "presets": ["next/babel"],
  3.   "plugins": []
  4. }

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:

  1. {
  2.   "presets": ["next/babel"],
  3.   "plugins": ["@babel/plugin-proposal-do-expressions"]
  4. }

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

  1. {
  2.   "presets": [
  3.     [
  4.       "next/babel",
  5.       {
  6.         "preset-env": {},
  7.         "transform-runtime": {},
  8.         "styled-jsx": {},
  9.         "class-properties": {}
  10.       }
  11.     ]
  12.   ],
  13.   "plugins": []
  14. }

To learn more about the available options for each config, visit their documentation site.

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.