Fix Next.js next-lint Not Supporting ESLint 9 Flat Config — Invalid Options: useEslintrc, extensions, resolvePluginsRelativeTo

Next.js 15.1+ ships with first-class ESLint 9 flat config support in eslint-config-next. This is the long-term, officially supported path — upgrade Next.js and migrate your ESLint config to the flat config format.

1. Check current Next.js version: `npx next --version`
2. Upgrade Next.js: `npm install next@latest eslint-config-next@latest`
3. Migrate .eslintrc.json to eslint.config.mjs using the new flat config format
4. Remove @eslint/compat workaround if previously applied
5. Verify with `npx next lint`

npm install next@latest eslint-config-next@latest

npx next lint

// eslint.config.mjs — Next.js 15.1+ native format
import { dirname } from 'path'
import { fileURLToPath } from 'url'
import { FlatCompat } from '@eslint/eslintrc'

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

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

const eslintConfig = [
  ...compat.extends('next/core-web-vitals', 'next/typescript'),
]

export default eslintConfig

The @eslint/compat package provides fixupConfigRules() and fixupPluginRules() that bridge the gap between legacy eslintrc configs and ESLint 9's flat config. This lets you use eslint-config-next with ESLint 9 by wrapping the config in a compatibility layer.

1. Install dependencies: `npm install -D eslint@latest @eslint/compat @eslint/eslintrc @eslint/js globals`
2. Create eslint.config.mjs at project root with the FlatCompat bridge
3. Use fixupConfigRules to wrap the legacy next/core-web-vitals config
4. Update package.json scripts to point to `next lint` (which will now recognize the flat config)
5. Test with `npx next lint` and `npx next build`

npm install -D eslint@latest @eslint/compat @eslint/eslintrc @eslint/js globals

npx next lint

// eslint.config.mjs
import { fixupConfigRules } from '@eslint/compat'
import { FlatCompat } from '@eslint/eslintrc'
import js from '@eslint/js'
import path from 'node:path'
import { fileURLToPath } from 'node:url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
})

const config = [
  ...fixupConfigRules(compat.extends('next/core-web-vitals')),
  {
    rules: {
      '@next/next/no-html-link-for-pages': 'off',
    },
  },
]

export default config

Configure Next.js to skip ESLint during `next build` by setting `eslint.ignoreDuringBuilds: true` in next.config.js. This allows builds to succeed while ESLint 9 is installed, but you lose automated lint checking in CI.

1. Open next.config.js (or next.config.mjs)
2. Add the eslint.ignoreDuringBuilds option
3. Optionally add a separate lint script that bypasses next lint entirely
4. Commit and redeploy

npx next build

// next.config.js
module.exports = {
  eslint: {
    ignoreDuringBuilds: true,
  },
}

// package.json scripts
"scripts": {
  "lint": "eslint .",
  "build": "next build"
}

Pin ESLint to v8.x in package.json to match eslint-config-next's peer dependency range. This is the simplest and most reliable fix until full ESLint 9 support ships.

1. Check current ESLint version: `npm ls eslint`
2. Install ESLint v8 latest: `npm install -D eslint@^8.57.0`
3. Remove any eslint.config.mjs flat config files if present
4. Ensure .eslintrc.json or .eslintrc.js exists with `extends: 'next/core-web-vitals'`
5. Run `next lint` to verify it works

npm install -D eslint@^8.57.0

npx next lint

{
  "devDependencies": {
    "eslint": "^8.57.0",
    "eslint-config-next": "14.2.15"
  }
}

{
  "extends": "next/core-web-vitals"
}