Try this
import pluginNext from '@next/eslint-plugin-next'
export default defineConfig([
{
plugins: {
'@next/next': pluginNext
},
},
{
files: ['**/*.ts', '**/*.tsx'],
rules: {
...pluginNext.configs.recommended.rules
}
}
])
Answer from TheFabi8A on Stack OverflowGitHub
github.com › vercel › next.js › discussions › 49337
How to use new "flat config" approach in Eslint? · vercel/next.js · Discussion #49337
Switching my projects to flat config was taking more time than it was worth. Beta Was this translation helpful? Give feedback. ... There was an error while loading. Please reload this page. Something went wrong. There was an error while loading. Please reload this page. ... There was an error while loading. Please reload this page. ... Something went wrong. There was an error while loading. Please reload this page. ... I have created a package eslint-config-next-flat (Source code) that is (roughly) a port of the eslint-config-next for FlatConfig.
Author vercel
GitHub
github.com › vercel › next.js › issues › 64114
New ESLint "flat" configuration file does not work with `next/core-web-vitals` · Issue #64114 · vercel/next.js
April 5, 2024 - For extra context, ESLint is moving from .eslintrc.json to eslint.config.js, and all other shareable ESLint configs I am using (e.g., typescript-eslint, eslint-config-prettier) already support this, even without needing to use FlatCompat.
Published Apr 05, 2024
GitHub
github.com › vercel › next.js › discussions › 50453
How can I use the new ESLint flat config in a Next.js project and also use 'canonical' rules? · vercel/next.js · Discussion #50453
After updating eslint config to flat format, eslint needs it to be in an eslint.config.js file for eslint to be happy with the flat format.
Author vercel
Top answer 1 of 4
7
Try this
import pluginNext from '@next/eslint-plugin-next'
export default defineConfig([
{
plugins: {
'@next/next': pluginNext
},
},
{
files: ['**/*.ts', '**/*.tsx'],
rules: {
...pluginNext.configs.recommended.rules
}
}
])
2 of 4
5
This works for me (I tested with next 15.0.3 / eslint 9.14 / eslint-config-next 15.0.3)
eslint.config.mjs
import pluginNext from '@next/eslint-plugin-next';
import parser from '@typescript-eslint/parser'; // optional
export default [
{
name: 'ESLint Config - nextjs',
languageOptions: {
parser, // optional
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
},
plugins: {
'@next/next': pluginNext,
},
files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
rules: {
...pluginNext.configs.recommended.rules,
...pluginNext.configs['core-web-vitals'].rules,
},
},
];
Stack Overflow
stackoverflow.com › questions › 76352104 › how-can-i-use-the-new-eslint-flat-config-in-a-next-js-project-and-also-use-cano
typescript - How can I use the new ESLint flat config in a Next.js project and also use 'canonical' rules? - Stack Overflow
Below is my src/eslint.config.ts which I transpile to eslint.config.js. import path from 'path'; import { fileURLToPath } from 'url'; import { FlatCompat } from '@eslint/eslintrc'; import typeScriptEslintPlugin from '@typescript-eslint/eslint-plugin'; import tsParser from '@typescript-eslint/parser'; import { type Linter } from 'eslint'; import functional from 'eslint-plugin-functional'; import globals from 'globals'; // import eslintPluginImport from 'eslint-plugin-import'; // Seems unnecessary.
Chris
chris.lu › web_development › tutorials › next-js-static-first-mdx-starterkit › linting-setup-using-eslint
Linting setup using ESLint 9 flat config - Next.js 15 Tutorial
In ESLint v9 the eslintrc files are deprecated, support for eslintrc (classic) configuration files will be removed in ESLint version 10.0.0 ... if Next.js detects that you are still using ESLint v8 they automatically set the ESLINT_USE_FLAT_CONFIG=false flag, which enables support for flat ...
Chris
chris.lu › web_development › tutorials › next-js-static-first-mdx-starterkit › typescript-eslint-flat-config
Typescript Linting and custom flat config - Next.js 15 Tutorial
Line 72: we can now remove next/typescript from the compatibility mode (compat.extends), as it gets replaced by our custom typescript-eslint config · Line 76: we set the FlatConfig type from the @typescript-eslint utilities as type for our default export (to replace the type from the ESLint package which is what we were using previously), the reason to switch for the Config type from ESLint to the one from @typescript-eslint utilities is because of issues related with the type of the default export, you can read more about those issues in the next chapter
Reddit
reddit.com › r/nextjs › eslint flat config + prettier
Eslint flat config + prettier : r/nextjs
February 6, 2023 - { "extends":["standard", "next/core-web-vitals", "prettier"], "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint", "prettier", "simple-import-sort"], "rules": { "prettier/prettier": "error", "react/react-in-jsx-scope": "off", "simple-import-sort/imports": "error", "simple-import-sort/exports": "error", "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": "error" }, "overrides": [ // override "simple-import-sort" config { "files": ["*.js", "*.jsx", "*.ts", "*.tsx"], "rules": { "simple-import-sort/imports": [ "error", { "groups": [ // Packages `react` related packages come first.
Medium
allalmohamedlamine.medium.com › eslint-flat-config-and-new-system-an-ultimate-deep-dive-2023-46aa151cbf2b
Eslint flat config and new system an ultimate deep dive 2023 | by Mohamed Lamine Allal | Medium
November 27, 2023 - can be inspired by tools like ◌ nextjs ◌ tauri ◌ … ◌ reuse their CLI code - and do it fast · Personally, at least for now. I’m sticking with the combination of snippets, boiler and modules. And generally i always use snippets as it works faster for me, with no friction. I’m counting on doing better though. ▪️ Flat config: Setting up Eslint and Prettier with eslint-prettier-plugin 🔥🔥 👀
npm
npmjs.com › package › eslint-config-next
eslint-config-next - npm
ESLint configuration used by Next.js.. Latest version: 16.1.6, last published: a month ago. Start using eslint-config-next in your project by running `npm i eslint-config-next`. There are 1677 other projects in the npm registry using eslint-config-next.
» npm install eslint-config-next
GitHub
github.com › jeremy-code › eslint-config-next-flat
GitHub - jeremy-code/eslint-config-next-flat: Intended as a stop-gap solution until Next.js updates their config to support Flat Config.
const js = require("@eslint/js"); const next = require("eslint-config-next-flat"); const parser = require("next/dist/compiled/babel/eslint-parser"); /** @type {import('eslint').Linter.FlatConfig}[] */ module.exports = [ { ignore: [".next"] }, // Change if `distDir` in Next.js config is different js.configs.recommended, next, { files: ["**/*.js", "**/*.jsx"], languageOptions: { parser, parserOptions: { requireConfigFile: false, sourceType: "module", allowImportExportEverywhere: true, babelOptions: { presets: ["next/babel"], caller: { supportsTopLevelAwait: true, }, }, }, }, }, ];
Author jeremy-code
Medium
medium.com › @mdnoushadsiddiqi › fixing-next-js-eslint-errors-with-flat-config-in-eslint-9-f622d4570af0
Fixing Next.js ESLint Errors with Flat Config in ESLint 9 | by Mohammad Noushad Siddiqi | Medium
October 2, 2025 - Old .eslintrc configs with plugins: ["@next/next"] are no longer valid. Next.js still bundles legacy configs. That’s why you see “plugin not detected” warnings unless you switch to flatConfig. Don’t redefine the Next.js plugin. If you extend nextPlugin.flatConfig.coreWebVitals, it already includes the plugin. Nextjs ·
Medium
medium.com › @paulnodet › embracing-eslints-flat-config-system-our-migration-4d4caccdb4f2
Embracing ESLint’s Flat Config System: Our Migration | by Paul Nodet | Medium
November 17, 2023 - React Native and Babel: React Native projects faced issues due to the new ESM requirement. We’re actively seeking solutions to integrate the flat config system within these constraints. Next.js Compatibility: The standard next lint command did not play well with eslint.config.js.
Chris
chris.lu › web_development › tutorials › next-js-16-linting-setup-eslint-9-flat-config
Next.js 16 Linting setup using ESLint 9 flat config | chris.lu
Setting up proper linting in your Next.js 16 project is crucial for maintaining code quality and consistency. This comprehensive guide walks you through configuring ESLint 9 with the modern flat config format, including support for TypeScript, React, MDX, and various ESLint plugins.
ESLint
eslint.org › docs › latest › use › configure › migration-guide
Configuration Migration Guide - ESLint - Pluggable JavaScript Linter
If you are using .eslintrc.js, the migration results in a config file that matches the evaluated output of your configuration and won’t include any functions, conditionals, or anything other than the raw data represented in your configuration. The flat config file format has been the default configuration file format since ESLint v9.0.0.