title: How to use eslint with Next.js in a project with an existing eslint config?
body: <p>I have a Node.js project with an existing eslint config, I generated a new next.js project in the same project so now I have</p>
  <pre><code> src
   .eslintrc.yml
   website
     .eslintrc.json
  </code></pre>
  <p>How could I set up next.js's eslint config with my already existing one? This is what the existing one looks like:</p>
  <pre class="lang-yaml prettyprint-override"><code>env:
    es2020: true
    node: true
  
  extends:
    - eslint:recommended
    - plugin:@typescript-eslint/recommended
  
  parser: &quot;@typescript-eslint/parser&quot;
  
  parserOptions:
    sourceType: module
  
  plugins:
    - &quot;@typescript-eslint&quot;
    - import
  
  rules:
    no-duplicate-imports: error
    no-template-curly-in-string: warn
    no-unreachable-loop: warn
    camelcase: error
    curly: error
    eqeqeq: error
    no-console: error
    no-else-return: error
    no-empty-function: error
    no-eval: error
    no-new: error
    no-param-reassign: error
    no-return-await: warn
    no-unneeded-ternary: error
    no-useless-rename: error
    no-var: error
    prefer-arrow-callback: error
    prefer-const: error
    prefer-destructuring: error
    prefer-object-spread: error
    prefer-template: error
    block-spacing: error
    padding-line-between-statements:
      [error, { blankLine: &quot;always&quot;, prev: &quot;*&quot;, next: &quot;return&quot; }]
    &quot;@typescript-eslint/explicit-module-boundary-types&quot;: off
    &quot;@typescript-eslint/no-shadow&quot;: error
    import/order:
      [
        error,
        {
          alphabetize: { caseInsensitive: true, order: asc },
          groups: [[external, builtin], internal, parent, sibling, index],
          newlines-between: never,
        },
      ]
  </code></pre>