Capítulo 429 de 456

ESLint

Core Idea

Next.js ships eslint-config-next, a flat-config-based ESLint package bundling Next.js-specific rules plus React/React Hooks recommended rule-sets. As of Next.js 16, next lint is removed; use the ESLint CLI directly.

Key Concepts

  • eslint-config-next: base config (Next.js + React + React Hooks rules), JS and TS support.
  • eslint-config-next/core-web-vitals: base config plus upgrades Core Web Vitals-impacting rules from warnings to errors; recommended for most projects; auto-included by create-next-app.
  • eslint-config-next/typescript: adds typescript-eslint rules, for TS projects, used alongside base or core-web-vitals.
  • next lint removed in v16: the eslint option in next.config.js no longer needed/used; migrate with the codemod migrate-from-next-lint-to-eslint-cli.
  • rootDir setting: tells @next/eslint-plugin-next where the Next.js app lives in a monorepo where Next isn't installed at the root.

Code Examples

import { defineConfig, globalIgnores } from 'eslint/config'
import nextVitals from 'eslint-config-next/core-web-vitals'

const eslintConfig = defineConfig([
  ...nextVitals,
  globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']),
])

export default eslintConfig
  • O que demonstra: setup padrão de flat config com Core Web Vitals e ignores default.
const eslintConfig = defineConfig([
  ...nextVitals,
  { rules: { 'react/no-unescaped-entities': 'off', '@next/next/no-page-custom-font': 'off' } },
  globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']),
])
  • O que demonstra: como desligar regras individuais.

Reference Tables

Principais regras @next/eslint-plugin-next incluídas em recommended (todas ✓ por padrão): google-font-display, google-font-preconnect, inline-script-id, next-script-for-ga, no-assign-module-variable, no-async-client-component, no-before-interactive-script-outside-document, no-css-tags, no-document-import-in-page, no-duplicate-head, no-head-element, no-head-import-in-document, no-html-link-for-pages, no-img-element, no-page-custom-font, no-script-component-in-head, no-styled-jsx-in-document, no-sync-scripts, no-title-in-document-head, no-typos, no-unwanted-polyfillio.

VersionChanges
v16.0.0next lint and the eslint next.config.js option removed in favor of ESLint CLI (codemod disponível).

Anti-patterns

  • Combinar Prettier sem eslint-config-prettier: regras de formatação do ESLint conflitam com Prettier.
  • Usar ...nextConfig cego em setup complexo com plugins conflitantes (react, react-hooks, jsx-a11y, import já configurados, ou parserOptions customizado via Babel): use @next/eslint-plugin-next diretamente em vez de spread, pra evitar colisão de plugins/parsers.

Key Takeaways

  1. Rode com a CLI padrão do ESLint (eslint .), não mais next lint.
  2. core-web-vitals é o recomendado pra maioria dos projetos; adicione typescript config junto se o projeto usa TS.
  3. Em monorepo sem Next.js na raiz, configure settings.next.rootDir (path, glob, ou array).
  4. lint-staged funciona normalmente via .lintstagedrc.js chamando eslint --fix.

Connects To

  • next CLI (ch432): next lint foi removido a favor de rodar eslint diretamente.
AnteriorTypeScriptPróximoCLI