Find unused components with eslint in Next.js

What is ESLint?

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It is used for code quality, consistency, best practices and customization.

Prerequistes

Make sure you have these plugins in your package.json:

• eslint-config-next
• @typescript-eslint/eslint-plugin
• eslint-plugin-unused-imports

or you can use this as well

npm install eslint-config-next @typescript-eslint/eslint-plugin eslint-plugin-unused-imports

ESLint + Next.js

At the root of a Next.js repo is a .eslintrc.json. Configure that file to make the one below to idenitfy unsued components.

{
  "extends": ["next/core-web-vitals"],
  "plugins": ["unused-imports"],
  "rules": {
    "jsx-a11y/alt-text": [0],
    "no-unused-vars": "warn", // Or "error" if you want it to be treated as an error
    "unused-imports/no-unused-imports": "warn",
    "unused-imports/no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "varsIgnorePattern": "^_",
        "args": "after-used",
        "argsIgnorePattern": "^_"
      }
    ]
  }
}