@next/eslint-plugin-next

Page-level configuration enforcement

This feature enforces that page navigation within a Next.js application is done using the Link component from Next.js instead of raw HTML anchor tags. This ensures client-side navigation is properly handled.

module.exports = {
  extends: ['plugin:@next/next/recommended'],
  rules: {
    '@next/next/no-html-link-for-pages': 'error'
  }
};

No sync scripts

This rule prevents the use of synchronous scripts in Next.js pages, which can lead to performance issues. It encourages the use of Next.js's built-in script optimization features.

module.exports = {
  extends: ['plugin:@next/next/recommended'],
  rules: {
    '@next/next/no-sync-scripts': 'error'
  }
};

No CSS tags

This rule ensures that CSS is imported using Next.js's built-in CSS support rather than through raw <link> tags in the document head, which can lead to unoptimized loading of styles.

module.exports = {
  extends: ['plugin:@next/next/recommended'],
  rules: {
    '@next/next/no-css-tags': 'error'
  }
};