Adding Babel presets and plugins in Next.js

Welcome back, for Blogvent day 18!

Next.js comes with several Babel presets built in, and chances are, it will cover most of what you’d like to use in your projects. But, it’s nice and simple to add custom presets and plugins, if you so desire!

First, make a file at the root of your project called .babelrc. You will want to include the next/babel preset to keep the ones that are built in to the framework:

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

If you want to add more presets than the next/babel one, you can add them to that array in an object, for example:

{
  "presets": [
    ["next/babel", {
      "preset-env": {
        "loose": true,
        "modules": false
      },
    }]
  ],
  "plugins": []
}

If you’d like to add plugins, it’s the same thing! If you don’t want to custom configure them or anything, you can name them in the file:

{
  "presets": ["next/babel"],
  "plugins": ["@babel/plugin-proposal-logical-assignment-operators"]
}

So if I had my .babelrc like this, I would be able to use this plugin without any extra steps. Neat!

I want to use this!

Of course you do! Here’s a starter application to try this out yourself:

(Clicking this button will deploy a Next.js starter project to Netlify, and clone it to your chosen Git provider)

Also, if you’d like to explore your plugin options, check out this page on the Babel Plugins website!