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

ESLint 9 is supported as of the Next.js 15 RC 2. v15 stable release coming soon

https://x.com/nextjs/status/1846276572812124565

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")];