I'm curious to know which ESLint rules you enable that aren't enabled by default. I recently came across this rule and found it helpful: no-else-return.

What other rules do you recommend? Thanks!

I've recently been looking at the Bullet Proof React repository and noticed that they use a few ESLint plugins. I've only ever used what comes with Next. What plugins do you use and recommend?

Hi, I'm an experienced coder but haven't worked with Next.js too much before. There's one repo I maintain for work but maintaining is definitely easier to pick up than building.

One thing I've noticed is that when trying to build the project, eslint goes off about a ton of things. Maybe I'm just used to other linters so I don't run into them as much, but it seems like a lot.

Here's an example that shows up a ton:

83:36  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any

It seems like this is typescript-specific, but the question still stands. Because I'm new to Next and don't know how to fix everything, I ask copilot and it recommends a change like this:

options: options as any,

being changed to...

options: options as unknown as import('@prisma/client').Prisma.InputJsonValue,

And I'm sure that's helpful, but it's also pretty confusing and kind of a lot. Am I just coding things wrong? Or do people just not care to this level for linting? Is there an easier way to make some of this work while still maintaining professional standards? I'm all for following best practices, I just want to make sure I'm not overdoing it.

Hi all,

I created an eslint v9 config. Anyone cares to help me improve it?

https://github.com/basemind-ai/eslint-config-next/blob/main/index.ts

Hi,
I am starting a new Next.js TypeScript project, and I want to use the Airbnb style guide for ESLint. The problem is Airbnb style guide doesn't work correctly with Next.js 15. It downgrades the version of ESLint in the package.json file. Moreover, it is working in JavaScript, and when I added the TypeScript plugin for it, I think it breaks things, and ESLint stops working entirely!

What should I do? Any suggestions. Anyone felt this situation, kindly help me figure this out!
Would love to have your suggestions, even if you haven't been in this situation!
Thanks in advance!

Anybody else watching this issue and checking every month (for 9 months now):

https://github.com/vercel/next.js/issues/64409
What is the big issue here? Why is this taking so long?

It a complete shitshow.

Am trying to deploy my nextjs app on render but am getting challenges. I cant deploy successfully unless i fix all ESLINT typescript warnings, is there any way i can bypass that?

Hello,

I'm attempting to enact the NextJS rule that disallows use of any form of console within the codebase, but it doesn't seem to be taking effect.

The default .eslintrc.json looks like this:

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

The current .eslintrc.json looks like this:

{
  "extends": "next/core-web-vitals",
  "rules": {
    "no-console": ["error"]
  }
}

. . . Yet, despite the presence of consoles in my code, I am seeing no warnings while running the linter. Any idea what the cause might be?

I'm trying to compile a nextjs app but I keep getting errors like:

warn  - The `app` dir is experimental. Please add `{experimental:{appDir: true}}` to your `next.config.js` to enable it
info  - Linting and checking validity of types ...warn  - The `app` dir is experimental. Please add `{experimental:{appDir: true}}` to your `next.config.js` to enable it
warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config

Failed to compile.

./components/CustomTexts.jsx
3:45  Error: Strings must use singlequote.  quotes
4:1  Error: `framer-motion` import should occur before import of `../utils/motion`  import/order
6:47  Error: Multiple spaces found before '}'.  no-multi-spaces
8:3  Error: Expected indentation of 4 space characters but found 2.  react/jsx-indent-props
9:3  Error: Expected indentation of 4 space characters but found 2.  react/jsx-indent-props
13:43  Error: Trailing spaces not allowed.  no-trailing-spaces
14:7  Error: Expected indentation of 8 space characters but found 6.  react/jsx-indent-props
14:18  Error: A space is forbidden before closing bracket  react/jsx-tag-spacing
14:19  Error: The closing bracket must be aligned with the line containing the opening tag (expected column 7 on the next line)  react/jsx-closing-bracket-location     

I added rules in both eslintrc files (eslintrc.js and eslintrc.json) "jsx-quotes": "off" but it doesn't make a difference.

Here is my eslintrc.json:

{
  "extends": "next/core-web-vitals",
  "rules": {
    "jsx-quotes": "off"
  }
}

"extends": "next/core-web-vitals", "rules": { "jsx-quotes": "off" } }

And my eslintrc.js with the "jsx-quotes" rule at the bottom:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    'react/no-unescaped-entities': 0,
    'eslintreact/no-danger': 0,
    'react/jsx-max-props-per-line': 0,
    'react/jsx-first-prop-new-line': 0,
    'no-console': 0,
    'jsx-a11y/label-has-associated-control': 0,
    'no-nested-ternary': 0,
    'consistent-return': 0,
    'no-alert': 0,
    'react/jsx-no-constructed-context-values': 0,
    'import/extensions': 0,
    'react/prop-types': 0,
    'linebreak-style': 0,
    'react/state-in-constructor': 0,
    'import/prefer-default-export': 0,
    'react/react-in-jsx-scope': 'off',
    'react/jsx-props-no-spreading': 'off',
    'jsx-a11y/no-noninteractive-element-interactions': 'off',
    'react/function-component-definition': [
      2,
      {
        namedComponents: 'arrow-function',
        unnamedComponents: 'arrow-function',
      },
    ],
    'max-len': [
      2,
      1050,
    ],
    'no-multiple-empty-lines': [
      'error',
      {
        max: 1,
        maxEOF: 1,
      },
    ],
    'no-underscore-dangle': [
      'error',
      {
        allow: [
          '_d',
          '_dh',
          '_h',
          '_id',
          '_m',
          '_n',
          '_t',
          '_text',
        ],
      },
    ],
    'object-curly-newline': 0,
    'react/jsx-filename-extension': 0,
    'react/jsx-one-expression-per-line': 0,
    'jsx-a11y/click-events-have-key-events': 0,
    'jsx-a11y/alt-text': 0,
    'jsx-a11y/no-autofocus': 0,
    'jsx-a11y/no-static-element-interactions': 0,
    'react/no-array-index-key': 0,
    'jsx-a11y/anchor-is-valid': [
      'error',
      {
        components: [
          'Link',
        ],
        specialLink: [
          'to',
          'hrefLeft',
          'hrefRight',
        ],
        aspects: [
          'noHref',
          'invalidHref',
          'preferButton',
        ],
      },
    ],
    'jsx-quotes': 'off'
  },
};

Does it have something to do with this warning warn - The Next.js plugin was not detected in your ESLint configuration.?

I've tried going through the link to configure it but it seems like everything is installed already.

I have a docusaurus project within the current nextjs repository in a docs/ folder. When I try to build the nextjs website it catches the docs/ with the eslint AND the typescript linter as being an error. I would rather not turn of linting completely. Is there anyway to ignore specifically the docs/ folder for both the next eslint AND the typescript linter?

I've tried to add it as ignoresPattern in the eslintrc.json and also add a .eslintignore but none of them work as i have to add the ignoreBuildErrors: true for typescript in the nextjs config.

Anyone have any experience with this?

I've been struggling to find out why this happens for the last hour! These issues exist in both VS Code and Webstorm:

• initialize a project with npx create-next-app, eslint, typescript and all -> the ESLint plugins for both VSCode and Webstorm works fine, shows warnings etc.

• initialize a projext with npx create-next-app --use-pnpm, eslint, ts -> the ESlint plugins for both misbehave:

  • VSCode -> throws no warnings no matter what .tsx file I open and change stuff

  • Webstorm -> throws errors like "Error: Failed to load plugin 'react-hooks' declared in ' » eslint-config-next/core-web-vitals" and the ""fix"" I've found atm is to explicitly install `@next/eslint-plugin-next` as a dev dependency

Why does pnpm not love me? Is it pnpm's fault, create-next-app's fault for how it handles pnpm, or something else?

You can see everything in terminal. When I run npm build next lints project and shows error. When I run next lint I get nothing.

How can I run linting with same config as next does?

Thanks for help...

What is the benefit to use "next lint" over "eslint" command. The only difference I spotted is that with eslint command in the end of the process I can see total amount of errors and warnings, but with "next lint" - not. Is there any specific reason to use "next lint" and not original "eslint"?

When someone tries to use "useLocale()" is a server component, especially in async function!?

Plugging I am missing? to stop people submissions?