Next.js Lint with Eslint + Airbnb Style + Husky + Lint-Staged

.eslintignore

.next
public
node_modules
yarn.lock
package-lock.json
**/*.test.js
coverage

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": ["plugin:react/recommended", "plugin:@next/next/recommended", "airbnb", "prettier"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": "off",
    "react/forbid-prop-types": "off",
    // defaultProps rule to be deprecated on function components
    // https://github.com/reactjs/rfcs/pull/107
    "react/require-default-props": [
      "error",
      {
        "ignoreFunctionalComponents": true
      }
    ]
  }
}

next.config.js

module.exports = {
  reactStrictMode: true,
  // I don't want it to run when compiling as I trust the CI stage of the pipeline and Husky.
  ignoreDuringBuilds: true,
}

package.json

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "eslint": "eslint \"**/*.+(js|jsx|ts|tsx)\"",
    "eslint:fix": "eslint --fix \"**/*.+(js|jsx|ts|tsx)\"",
    "prettier": "prettier --check \"**/*.+(js|jsx|ts|tsx|json|yml|yaml|md|css)\"",
    "prettier:fix": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|yml|yaml|md|css)\"",
    "prepare": "husky install",
    "pre-commit": "lint-staged"
  },
  "dependencies": {
    "next": "11.1.2",
    "prop-types": "^15.7.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-next": "11.1.2",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.25.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    // For a successful husky installation check the documentation.
    // https://typicode.github.io/husky/#/?id=automatic-recommended
    "husky": "^7.0.0",
    "lint-staged": "^11.1.2",
    "prettier": "2.4.0"
  },
  "lint-staged": {
    "./*/**/*.{js,jsx,ts,tsx}": [
      "npm run prettier:fix",
      "npm run eslint:fix"
    ],
    "*.{json,md}": [
      "npm run prettier:fix"
    ]
  }
}