Published in



How to configure EsLint in Nextjs?

EsLint is an analytic tool that helps to identify problem and error patterns.

How to configure EsLint in Nextjs By Rajdeep Singh
How to configure EsLint in Nextjs?

What is EsLint?

EsLint is a tool that helps find the problem and error in code within IDE and Build time.

Eslint highlights the main features, which are more helpful to write less buggy code in IDE.

  1. Finds Problems
  2. Fix Automatically
  3. Easy to Customizable

Why I'm using EsLint in Nextjs?

As I said previously, esLint helps find error and error patterns in code. But in nextjs eslint help find errors like image, anchor, CSS, etc.

The EsLint helps to write more secure code. EsLint supports all major IDE in the javascript world. esLint shows an error in your IDE, and the quick fix button help solve the error inside IDE.

What is EsLint?
EsLint shows a warring tab in IDE.

Go to check out the demo of esLint in codesandbox.

How to use EsLint?

Installation of EsLint is straightforward. You follow along with me to install EsLint.


  1. Add New script
  2. Run yarn and NPM

Add New script

In the first step, you add a new script in the nextjs package.json file.

"scripts": {   "lint": "next lint"}

Now your first step is complete.

Run YARN and NPM

In the second step, you first run the lintcommand help of yarn and npm. after eslint, ask you to choose a configure option.

EsLint configure in nextjs
EsLint configure

I always recommended choosing a Strict (Recommended ) option in nextjs. After your esLint, start downloading the node package according to your option.

Install EsLint in nextjs
Install EsLint in nextjs

After the EsLint install starts, EsLint creates .eslintrc.json a file with the esLint configuration. You can add more configurations according to your requirement in .eslintrc.json file.

Now EsLint is ready to start working on your nextjs project.


EsLint configuration is straightforward to install eslint in nextjs. Now your start working with eslint in nextjs.

I highly recommend using eslint in your nextjs app. EsLint also helps to move your website reactjs to nextjs.

EsLint helped to step up the nextjs project error-free. esLint guide to what is used in nextjs and what is not used in nextjs. Like, show errors in an image component, link component, etc.

If you have any queries or need my help, don't hesitate to contact me at officialrajdeepsingh[@] Are you migrating React to Next.js? You can also contact me and follow the Next.js publication.

Feel free to like and share my article with others if you like my writing. You also tag on Twitter official_R_deep.

Read More content at Nextjs. Sign up for a free newsletter and join the nextjs community on medium.




Nextjs Publication is an unofficial publication of Nextjs. Our goal is to bring beginners and pro developer in one place, and everybody understands the basic concept of next.js.

Recommended from Medium

12 Useful JavaScript Snippets For Everyday Problems


Simplest custom checkbox component for Vue.JS

React vs Angular

React/ State and Props

Drawer Navigation in React Native 2020

React Native — Pros And Cons

High-performance array transformations

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer ||

More from Medium

How to change port in nextjs?

MUI5: NextJS + MUI5 + SCSS Modules Boilerplate

Step-by-step: How to Internationalize your NextJS App with Next-Translate

Protected Route (/username) in React/NextJS — Part 1