Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}
Comment on lines +1 to +3

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

Next.js 15 eslint next/core-web-vitals preset configuration requirements

💡 Result:

Next.js 15: next/core-web-vitals ESLint preset — what you need to configure

1) Install the required packages

You need eslint and eslint-config-next in your project (Next can also add them for you when you first run next lint). [1]

2) Choose the config format you’re using

A) Legacy .eslintrc* (extends string)

Use this if you’re on the classic ESLint config format:

{
  "extends": "next/core-web-vitals"
}

This enables the Core Web Vitals ruleset (it promotes some Next.js lint rules from warnings to errors). [2]

B) ESLint “flat config” (eslint.config.mjs)

In Next.js 15 docs, the flat-config way is to import the preset from eslint-config-next/core-web-vitals and export it:

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

export default defineConfig([
  ...nextVitals,
  // (optional) override ignores
  globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']),
])

This is the documented setup flow for using the core-web-vitals preset with flat config. [1]

3) (Optional) Combine with TypeScript preset

If you want the Next.js TypeScript ESLint add-on, extend/include next/typescript alongside next/core-web-vitals. [2]


🌐 Web query:

ESLint TypeScript parser configuration for Next.js projects

💡 Result:

Recommended (Next.js-managed parser; most projects)

In Next.js projects you typically do not set parser yourselfeslint-config-next already wires up the right parser/plugins/settings. Use the Next presets and (if you want TS rules) add the TS preset too. [1]

Flat config (eslint.config.mjs)

import { defineConfig } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";

export default defineConfig([
  ...nextVitals,
  ...nextTs,
]);

This is the “Next + TypeScript” setup Create Next App uses conceptually (Core Web Vitals + TS rules). [1]

Legacy config (.eslintrc.*)

{
  "extends": ["next/core-web-vitals", "next/typescript"]
}

next/typescript is based on plugin:@typescript-eslint/recommended``. [2]

If you specifically need typed linting (rules that require type info)

Configure @typescript-eslint/parser with type-aware parser options (modern recommendation: parserOptions.projectService: true). [3]

import tsParser from "@typescript-eslint/parser";

export default [
  {
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        projectService: true
      }
    }
  }
];

Tip: Only do this when you actually enable type-aware rulesets; otherwise it can slow linting and complicate config. [3]

Sources: Next.js ESLint config docs [1], Next.js “With TypeScript” (next/typescript) [2], typescript-eslint parser typed-linting options [3].


Solid base ESLint preset for Next.js, but incomplete for TypeScript projects.

The "next/core-web-vitals" preset includes Next.js specific rules for Core Web Vitals compliance (promoting certain warnings to errors). However, if this is a TypeScript project, extend both presets:

{
  "extends": ["next/core-web-vitals", "next/typescript"]
}

No additional parserOptions or root fields are required—the Next.js presets handle parser configuration automatically. Add custom parser options only if you need type-aware linting (which requires projectService: true on @typescript-eslint/parser).

🤖 Prompt for AI Agents
In @.eslintrc.json around lines 1 - 3, The ESLint config currently extends only
"next/core-web-vitals"; for a TypeScript Next.js project update the "extends"
entry in .eslintrc.json to include both "next/core-web-vitals" and
"next/typescript" (i.e., change the extends value to an array containing those
two presets) so TypeScript-specific lint rules are applied by Next's presets.

Loading