ESLint 9 is not working properly with Next 15

Question

I've recently migrated my project to Next.js 15, but ESLint isn’t functioning as expected. So far, I've installed the following packages:

"eslint": "9.13.0",
"eslint-config-next": "15.0.1",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"next": "15.0.1"

.prettierrc.json:

{
    "printWidth": 110,
    "bracketSpacing": true,
    "tabWidth": 4,
    "endOfLine": "auto",
    "trailingComma": "es5",
    "semi": true,
    "singleQuote": true
}

settings.json in VS Code:

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],  
  
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll": "explicit"
  },  
  "prettier.printWidth": 80,
}

eslint.config.mjs:

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

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

If I add eslintrc.json will work if I run yarn lint but won´t work in real time in VS Code.

Despite the installation, ESLint doesn’t seem to lint my files or show any errors in VS Code. I’d appreciate any guidance on configuring ESLint for Next.js 15. Are there any specific settings or dependencies required for ESLint to work seamlessly with Next.js 15?

Answer 1

Use compatibility mode

Original:

{
  "extends": [
    "next/core-web-vitals",
    "plugin:@tanstack/eslint-plugin-query/recommended",
    "prettier"
  ],
  "plugins": ["@tanstack/query"]
}

Flat:

import { FlatCompat } from "@eslint/eslintrc"
import path from "path"
import { fileURLToPath } from "url"

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

const compat = new FlatCompat({
  baseDirectory: __dirname,
})

/** @type {import('eslint').Linter.Config[]} */
const configs = [
  ...compat.extends("next/core-web-vitals"),
  ...compat.extends("next/typescript"),
  ...compat.extends("plugin:@tanstack/eslint-plugin-query/recommended"),
  ...compat.extends("prettier"),
  ...compat.plugins("@tanstack/query"),
]

export default configs

https://github.com/vercel/next.js/issues/71763#issuecomment-2436288395