Setting up ESLint for NextJs

ESLint requires a few additional configurations to be set up optimally for use with Next JS.

To start off with, install eslint, eslint-plugin-react,

npm i --save-dev eslint eslint-plugin-react

Next, create a .eslintrc file using the following:

eslint --init

Use the arrow keys to select: Use a popular style guide -> Standard -> JSON. Install any additional dependencies required.

An eslintrc.json file will be created.

Add the following to your .eslintrc.json file:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off"
  },
  "globals": {
    "React": "writable"
  }
}

Note the “react/react-in-jsx-scope”: “off” under rules, and “React” under “globals”. Without these, you will get errors since NextJs does not require you to import React into each component.

Hope this helps!

Note: If you’re using Visual Studio Code and ESLint is still not working, try updating your Visual Studio Code.

Deploy your app with a custom domain in 10 minutes for under $10

Build a Next.js Website With Custom Domain in 10 Minutes