eslint-config-next-flat

Flat config port of the Next.js ESLint config eslint-config-next.

Installation

npm install -D eslint eslint-config-next-flat   # npm
yarn add -D eslint eslint-config-next-flat      # yarn
pnpm install -D eslint eslint-config-next-flat  # pnpm

Create an eslint.config.js file in the root of your Next.js project and add the following:

const js = require("@eslint/js");
const next = require("eslint-config-next-flat");

/** @type {import('eslint').Linter.FlatConfig}[] */
module.exports = [
  { ignore: [".next"] }, // Change if `distDir` in Next.js config is different
  js.configs.recommended,
  next,
];

If not using TypeScript, add custom Next.js Babel parser from "next/dist/compiled/babel/eslint-parser". Otherwise, for TypeScript, use typescript-eslint.

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,
          },
        },
      },
    },
  },
];

Depending on your project, you may need to adjust the files and ignore properties such as:

const js = require("@eslint/js");
const next = require("eslint-config-next-flat");

module.exports = [
  { ignore: [".next"] }, // Change if `distDir` in Next.js config is different
  js.configs.recommended,
  {
    files: ["src", "pages", "components", "lib", "utils"], // Add your Next.js project directories
    ...next,
  },
];

License

next-config-next-flat is licensed under the MIT license.