Linting and Formatting

Next.js 16 10,514 removed next lint, and with it the eslint key in the config file. The CLI now reads the word as a directory name:

Output of 84

$ npx next lint
Invalid project directory provided, no such directory: ...\tslab\lint

You run ESLint 39,810 's own CLI instead. create-next-app --eslint writes "lint": "eslint" into package.json and a flat config that layers two presets from eslint-config-next:

eslint.config.mjs as generated by create-next-app 16.3.5JavaScript

import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
]);
export default eslintConfig;

eslint-config-next bundles the recommended rules of eslint-plugin-react, eslint-plugin-react-hooks and @next/eslint-plugin-next; /core-web-vitals promotes the rules affecting LCP, INP and CLS from warning to error; /typescript adds typescript-eslint 16,401 's recommended set. Give a component const label: any, an <img> and an <a href="/products">:

Output of 85

$ npx eslint .
app\lint-demo\page.tsx
   7:16  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  10:7   warning  Using `<img>` could result in slower ...  @next/next/no-img-element
  11:7   error    Do not use an `<a>` element to navigate to `/products/`. Use
                  `<Link />` from `next/link` instead.      @next/next/no-html-link-for-pages
✖ 3 problems (2 errors, 1 warning)

The exit code is 1, which is what a CI step or a lint-staged 14,736 hook reads. <a> to an internal route is an error because it throws away client-side navigation (next/link); <img> is only a warning because next/image is not always the right answer. Migrating an older project is one command, npx @next/codemod@canary next-lint-to-eslint-cli ., which writes the flat config, rewrites the lint script and adds the dependencies. In a monorepo, point the plugin at the app with settings: { next: { rootDir: 'packages/my-app/' } }.

ESLint does not format. Add prettier and eslint-config-prettier, then import prettier from 'eslint-config-prettier/flat' last in the array — later entries win — to switch off the stylistic rules that would fight Prettier 68,264 . Of the three checks only tsc --noEmit is automatic, inside next build; eslint . and prettier --check . run only when your pipeline runs them.

MENU