How to add ESLint in Next.js ?

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.

Steps for Creating a Next.js Application including 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:

How to add ESLint in Next..js ?

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:

Javascript

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:

How to add ESLint in Next..js ?

Example 2:

Javascript

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:

How to add ESLint in Next..js ?

Example 3: Using Eslint:

Javascript

import React from 'react'

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

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

export default MyComponent

Output: