Handling Next.js specific rules

Provide an example of ESLint rules tailored for Next.js, such as `react/react-in-jsx-scope` rule disablement and setting `next/core-web-vitals` recommended rules.

module.exports = {
  extends: ['next', 'next/core-web-vitals'],
  rules: {
    // Disable the rule that requires React to be in scope when using JSX
    'react/react-in-jsx-scope': 'off',
  },
};

This is an ESLint configuration object. It sets the ESLint rules for a Next.js project by extending `next` and `next/core-web-vitals` presets and explicitly disabling the `react/react-in-jsx-scope` rule, which is not needed in Next.js due to the automatic imports of React in scope with JSX files.

import { useEffect } from 'react';

export default function HomePage() {
  useEffect(() => {
    // This code does not require React to be imported
    console.log('Next.js handles React in scope');
  });

  return <h1>Welcome to Next.js!</h1>;
}

This snippet demonstrates a React functional component in a Next.js application. Notice that 'React' is not imported, because Next.js automatically imports React for each file that uses JSX, thanks to the ESLint rule customization in the previous example.