How to add ESLint in Next.js ?

ESLint is a popular linting tool for identifying and fixing issues in JavaScript code. Adding ESLint to your Next.js project ensures that your code follows best practices and maintains a consistent style. This enhances code quality, helps catch errors early, and makes the codebase easier to maintain. In this article, we are going through the steps to add ESLint to your Next.js project. 

ESLint

ESLint is a JavaScript linter that is designed to help identify and correct problems in JavaScript code. ESLint is based on JSHint, but ESLint has more features and is more configurable. ESLint can be used to enforce a coding style, detect errors and potential problems, and help improve code quality.

Approach

To add ESLint in Next.js, install eslint and eslint-config-next, then configure ESLint with an .eslintrc.json file. Customize your linting rules, add linting scripts to package.json, and run ESLint to enforce code quality.

Steps to setup Next.js with ESLint

Step 1: First install Nodejs on your computer, you can download it from NodeJS official website.

Step 2: Now open the terminal and navigate to the directory where you want to create your Next.js application.

Step3: After that, run the following command on the terminal to create the Next.js application.

npx create-next-app myapp --typescript --eslint

Here myapp is the name of my application you can change it if you want.

--typescript is a flag to set up the project in Typescript (programming language).

--eslint is a flag to add ESLint in the project.

Project Structure:

Step 4: Move inside the app that you created for that and run the following command on terminal

cd myapp

Step 5: Run the following command on the terminal

npm run dev

Step 6: Open the following file in your  "index.js" from your project in any code editor and write the code for the desired output

As you can see a file named ".eslintrc.json" is created which means we have successfully added ESLint to our project.

Example 1:

// index.js
import React from 'react';
export default function Home() {
    return (
        <main className="flex flex-col items-center 
            justify-center h-screen">
            <h1 className="text-4xl font-bold 
                text-blue-700 mb-6">Hello world</h1>
            <p className="text-lg text-gray-500">my first app</p>
            <div className="mt-6">
                <a href="#" className="bg-blue-700 text-white 
                    py-2 px-4 rounded hover:bg-blue-800">
                    Button
                </a>
            </div>
        </main>
    )
}

Output:

Example 2:

// index.js

import React from 'react';
export default function Home() {
    return (
        <main className="flex flex-col items-center 
            justify-center h-screen">
            <h1 className="text-4xl font-bold 
                text-blue-700 mb-6">Hello world</h1>
            <p className="text-lg text-gray-500">
                my first app
            </p>
            <div className="mt-6">
                <a href="#" className="bg-blue-700 
                    text-white py-2 px-4 rounded
                    hover:bg-blue-800">Button</a>
            </div>
        </main>
    )
}

Output:

Example 3: Using Eslint:

import React from 'react'

function MyComponent() {
    const unusedVariable = 'This variable is never used'

    return <div>Hello, world!</div>
}

export default MyComponent

Output: