Next.js - ESLint

---

---

What is ESLint?

ESLint is a JavaScript code analysis tool for identifying and reporting issues in code quality, style, and security. It helps developers identify and fix problems in their code, and adhere to coding standards.

How it works?

• The ESLint can be configured as dependency in Next.js project.
• It parses the JavaScript code to understand its structure and syntax.
• It applies a set of predefined rules to the code, to detect potential issues in the code.
• Finally, the ESLint reports any violations, errors, or quality issues found in the code.

Next.js provides an ESLint plugin, eslint-plugin-next, already bundled within the base configuration, that makes it possible to catch common issues and problems in a Next.js application.

Steps to Configure ESLint in Next.js

Here we provide steps to configure ESLint in your Next.js project. But before that, you must setup Next.js project in your local machine.

Step 1: Install ESLint

After setting up Next.js project, you can get started by installing ESlint library and necessary dependencies. We can do this using either npm or yarn, depending on our preference.

// Using npm
>> npm install eslint eslint-config-next --save-dev

// Using yarn
>> yarn add eslint eslint-config-next --dev

Step 2: Create Configuration File

Next, we need to create a configuration file for ESLint. This file will contain all the rules and settings that we want to apply to our code. We can create a new file called .eslintrc.json in the root directory of our project.

// File: .eslintrc.json

{
    "extends": "next/core-web-vitals"
}

Once we have our configuration file, we need to specify the ESLint configuration in our package.json file. We can do this by adding the following lines to our package.json file:

// File: package.json

"eslintConfig": {
    "extends": "next"
},

This tells ESLint to use the next configuration provided by eslint-config-next. This configuration includes all of the necessary rules for a Next.js project.

Step 3: Create ESLint Command

Now that we have our ESLint configuration set up, we need to create a command to run ESLint. We can do this by adding the following lines to our package.json file:

// File: package.json

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

This tells npm to run the lint command when we run npm run lint. This command will run ESLint on our code and report any issues that it finds.

Step 4: Run ESLint

Now that we have our ESLint configuration set up, we can run ESLint on our code. We can do this by running the following command in the terminal:

>> npm run lint

This will run ESLint on our code and report any issues that it finds. If there are no issues, it will exit with a code of 0. If there are issues, it will exit with a code of 1.

Linting Custom Directories and Files

By default, Next.js will run ESLint for all files in the pages/, app/, components/, lib/, and src/ directories. However, you can specify which directories using the dirs option in the eslint config in next.config.js for production builds:

// File: next.config.ts

module.exports = {
    eslint: {
      dirs: ['pages', 'utils'], // Only run ESLint on the 'pages' and 'utils' directories during production builds (next build)
    },
}

Disabling Linting on Production Builds

You can disable linting while creating a production builds. This allows production builds to successfully complete even if your project has ESLint errors. To disable linting on production builds, you can use the ignoreDuringBuilds option in the eslint config in next.config.js:

// File: next.config.ts

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
}
 
export default nextConfig

Disabling the Cache

To improve performance, information of files processed by ESLint are cached by default. This is stored in .next/cache or in your defined build directory. If you include any ESLint rules that depend on more than the contents of a single source file and need to disable the cache, use the --no-cache flag with next lint.

>> next lint --no-cache