Setting up ESLint for NextJs

Joel Masters
1 min readJun 16, 2019


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.



Joel Masters