How to run ESLint in Next.js using yarn dev

Question

I'm using Next.js version 13, and I want to run ESLint when running 'yarn dev.' In a previous project where I used TypeScript with Next.js, ESLint would run when I executed 'yarn dev,' and it would catch errors. However, when I try to use Next.js alone, it's not working. What could be the issue?

package.json

 "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        
        "@babel/eslint-parser": "^7.22.15",        
        "next": "13.5.4",
        "react": "^18",
        "react-dom": "^18",
        "react-hook-form": "^7.47.0",        
        "swr": "^2.2.4",
        "yup": "^1.3.2"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.16",
        "eslint": "^8.53.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-next": "13.5.4",
        "eslint-config-prettier": "^9.0.0",
        "eslint-plugin-import": "^2.28.1",
        "eslint-plugin-jsx-a11y": "^6.7.1",
        "eslint-plugin-prettier": "^5.0.1",
        "eslint-plugin-react": "^7.33.2",
        "eslint-plugin-react-hooks": "^4.6.0",
        "postcss": "^8.4.31",
        "prettier": "^3.0.3",
        "prettier-plugin-tailwindcss": "^0.5.6",
        "tailwindcss": "^3.3.3"
    }

eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "airbnb",
        "airbnb/hooks",
        "prettier",
        "next",
        "next/core-web-vitals"
    ],
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": ["react", "react-hooks", "eslint", "prettier"],
    "rules": {
        "react/jsx-filename-extension": 0,
        "import/extensions": 0,
        "no-plusplus": 0,
        "no-shadow": 1,
        "no-continue": 0,
        "no-underscore-dangle": 1,
        "no-nested-ternary": 1,
        "import/no-cycle": 1,
        "import/prefer-default-export": 0,
        "prettier/prettier": 0,
        "default-param-last": 1,
        "react/function-component-definition": [
            2,
            { "namedComponents": "arrow-function" }
        ],
        "class-methods-use-this": 0,
        "no-param-reassign": 0,
        "react/prop-types": 0,
        "react/react-in-jsx-scope": "off",
        "linebreak-style": 0,
        "quotes": [
            2,
            "double",
            { "avoidEscape": true, "allowTemplateLiterals": true }
        ],
        "import/no-unresolved": 0,
        "react-hooks/exhaustive-deps": "warn",
        "react/require-default-props": 0,
        "jsx-a11y/label-has-associated-control": [
            "error",
            {
                "required": {
                    "some": ["nesting", "id"]
                }
            }
        ],
        "jsx-ally/click-events-have-key-events": 0,
        "jsx-a11y/no-noninteractive-element-interactions": 0,
        "react/jsx-props-no-spreading": 0,
        "react/jsx-no-useless-fragment": "off",
        "import/no-extraneous-dependencies": "off",
        "no-unused-vars": [
            "error",
            { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }
        ]
    }
}

It works fine when using 'yarn lint

eslintrc.json change