Customizing Babel Config

Examples

Next.js includes the next/babel preset to your app, it 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 at the top of your app, if such file is found, we’re going to consider it the source of truth, 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.