Use the npx @eslint/migrate-config .eslintrc.json command.

It produces ugly output, but seems to work - I assume we will eventually be able to do it as recommended in the eslint docs.

Heres the output I got (placed inside eslint.config.mjs file).

import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: js.configs.recommended,
    allConfig: js.configs.all
});
export default [...compat.extends("next")];

Update

NextJS now has official guide to add eslint to project: https://nextjs.org/docs/basic-features/eslint Additionally you need to install ESLint extension.

Also, If you're looking for ESLint with typescript support: https://gourav.io/blog/nextjs-cheatsheet

Old answer:

Install ESLint

npm i eslint --save-dev

Install ESLint plugins:

npx install-peerdeps --dev eslint-config-airbnb

Above single command will install 6 plugins: eslint-config-airbnb, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y. You can also install these plugins individually.

Install babel eslint

npm i -D babel-eslint

Install prettier plugin (optional, so that prettier doesn't mess up with linting)

 npm i -D eslint-config-prettier eslint-plugin-prettier

Your "devDependencies" should look something like this:

"devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^2.5.1"
  }

Now, create a file .eslintrc.json at root of project. Paste below config:

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "parser": "babel-eslint",
  "extends": [
    "eslint:recommended",
    "airbnb",
    "airbnb/hooks",
    "plugin:react/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:jsx-a11y/recommended",
    // "plugin:react-hooks/recommended",
    // always put prettier at last
    "prettier"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true // enable linting for jsx files
    },
    "ecmaVersion": 11,
    "sourceType": "module"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": ["react", "react-hooks"],
  "rules": {
    // NextJs specific fix: suppress errors for missing 'import React' in files for nextjs
    "react/react-in-jsx-scope": "off",
   // NextJs specific fix: allow jsx syntax in js files
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project
    "react/display-name": 1
  }
}

Also, install ESLint extension for VSCode.

Reload VSCode window once to get proper linting

ESLint will automatically start detecting errors/warnings in *.js and *.jsx files. If that's not the case then either your project has no linting errors or ESLint is not properly setup. To test if linting works run eslint command in terminal with folder path i.e. eslint pages/** and notice output.

To disable linting of some files/folders you can create a .eslintignore at the root of project.

.eslintignore:

# don't ever lint node_modules
node_modules
# don't lint build output (make sure it's set to your correct build folder name)
dist
# don't lint nyc coverage output
coverage

Finally, you can also add linting to scripts in package.json as a part of your build/deploy process:

"scripts": {
    "lint": "eslint ./components/** ./pages/** -c .eslintrc.json --ext js,jsx",
    "lint-fix": "eslint ./components/** ./pages/** -c .eslintrc.json --fix --ext js,jsx",
}

See my current ESLint configuration for NextJS Typescript project: https://github.com/GorvGoyl/Personal-Site-Gourav.io/blob/main/.eslintrc.js

Try this

import pluginNext from '@next/eslint-plugin-next'

export default defineConfig([
  {
    plugins: {
      '@next/next': pluginNext
    },
  },
  {
    files: ['**/*.ts', '**/*.tsx'],
    rules: {
      ...pluginNext.configs.recommended.rules
    }
  }
])