@next/eslint-plugin-next

What is @next/eslint-plugin-next?

The @next/eslint-plugin-next package provides a set of ESLint rules specifically tailored for Next.js applications. It helps developers follow best practices and avoid common pitfalls when building applications with Next.js.

What are @next/eslint-plugin-next's main functionalities?

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'
  }
};

Other packages similar to @next/eslint-plugin-next

eslint-plugin-react

This package includes ESLint rules for React applications. It helps with best practices and catching common mistakes in React code. While it is not specific to Next.js, it is often used alongside Next.js projects for general React code quality.

eslint-plugin-jsx-a11y

This plugin focuses on enforcing accessibility best practices in JSX elements. It is complementary to @next/eslint-plugin-next, which does not specifically target accessibility concerns.

eslint-config-airbnb

This is a widely-used ESLint configuration that enforces a set of coding standards and best practices for JavaScript and React. It is more general-purpose compared to @next/eslint-plugin-next, which is tailored for Next.js applications.

README

@next/eslint-plugin-next

Documentation for @next/eslint-plugin-next can be found at: https://nextjs.org/docs/basic-features/eslint#eslint-plugin