Configuring Babel

This is actually really simple. Next.js comes with a pre-baked preset for Babel, so you can simply create .babelrc and put in the following:

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

This may be useful, for example, for tests; keep this config if you'd like to use Jest, for instance:

{  "presets": [    "next/babel",    "env"  ],  "env": {    "test": {      "presets": [        "next/babel",        ["env", {"modules": "commonjs"}]      ]    }  }}

Here, we are using Babel's ability to have a different set of plugins and presets based on environment.

You will also need to install babel-preset-env:

$ npm install babel-preset-env --save-dev

We will talk more about tests in the next chapters.

Get Next.js Quick Start Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.