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:


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.

Creator of Help others achieve their goals. Get paid.