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.