Eslint in Next.js

$ yarn add -D eslint prettier husky lint-staged eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-jsx-a11y eslint-plugin-simple-import-sort

.eslintrc:

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": ["plugin:react/recommended", "plugin:prettier/recommended"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "simple-import-sort"],
  "rules": {
    "prettier/prettier": "warn",
    "simple-import-sort/imports": "warn",
    "simple-import-sort/exports": "warn",
    "sort-imports": "off",
    "import/prefer-default-export": "off",
    "react/react-in-jsx-scope": "off"
  }

.prettierrc:

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "jsxBracketSameLine": true
}

.huskyrc:

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

.lintstagedrc:

{
  "**/*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ],
  "**/*.{html,css,json,gql,md}": [
    "prettier --write"
  ]
}

smhmd/eslint-in-nextjs.md