Next.js v15 is being installed with ESLint v8

[silvenon]

Link to the code that reproduces this issue

https://github.com/silvenon/repro/tree/nextjs-v15-eslint-v8

To Reproduce

1. create an app using npx create-next-app@latest
2. ensure that ESLint is set to "Yes"

Current vs. Expected behavior

Currently it installs ESLint v8, but I expected v9 considering that Next.js v15 says that it supports v9. Did I misunderstand what that meant?

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.0.0: Tue Sep 24 23:39:07 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.18.0
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 9.9.0
Relevant Packages:
  next: 15.0.1 // Latest available version is detected (15.0.1).
  eslint-config-next: 15.0.1
  react: 19.0.0-rc-69d4b800-20241021
  react-dom: 19.0.0-rc-69d4b800-20241021
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

create-next-app, Linting

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

No response

[samcx]

@silvenon It is on our to-do list! We have not added it to create-next-app yet since I believe there are a few improvements to be done (e.g., I believe using flat config looks funky right now versus the old config).

Nonetheless, ESLint v9 is fully supported in v15.

[martinkadlec0]

Is there any example of how a flat config for v9 could look like (with vitals & next config with typescript) ? There are some hacky solutions out there from before the official support, but can't find anything new after the release.

[Jochem-W]

Is there any example of how a flat config for v9 could look like (with vitals & next config with typescript) ? There are some hacky solutions out there from before the official support, but can't find anything new after the release.

I ended up using the solution outlined here on the ESLint docs. Not sure if there's a better solution currently, but it works for me in VS Code and when running next commands.

// eslint.config.mjs
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"),
]

export default configs

[Sparticuz]

This should work

import nextPlugin from "@next/eslint-plugin-next";

export default [
  {
    name: "Next Plugin",
    plugins: {
      "@next/next": nextPlugin,
      rules: {
        ...nextPlugin.configs.recommended.rules,
        ...nextPlugin.configs["core-web-vitals"].rules,
      },
    },
  },
];