ESLint plugin to enforce 'use client' directive in Next.js React components
npm install @serviceup/eslint-plugin-enforce-use-clientAn ESLint plugin to ensure proper usage of the 'use client' directive in Next.js React components.
In Next.js applications using the App Router, components that use client-side features (React hooks, browser APIs, event handlers) must include the 'use client' directive at the top of the file. This plugin helps enforce this requirement by:
1. Requiring the 'use client' directive in files with client-side features
2. Warning about unnecessary 'use client' directives in files without client-side features
``bash`
npm install --save-dev @serviceup/eslint-plugin-enforce-use-clientor
yarn add --dev @serviceup/eslint-plugin-enforce-use-clientor
pnpm add --save-dev @serviceup/eslint-plugin-enforce-use-client
Add to your ESLint configuration:
`javascript`
// .eslintrc.js
module.exports = {
plugins: ['@serviceup/enforce-use-client'],
extends: [
'plugin:@serviceup/enforce-use-client/recommended'
]
};
This plugin provides two rules:
Enforces that React component files using client-side features include the 'use client' directive at the top.
Features detected:
- React hooks (functions starting with "use")
- Browser APIs (window, document, navigator, localStorage, sessionStorage)
- JSX event handlers (onClick, onChange, etc.)
- JSX elements presence
This rule is auto-fixable and will add the directive when needed.
Warns when the 'use client' directive is used unnecessarily in files without any client-side features.
This rule is auto-fixable and will remove the directive when it's not needed.
Both rules automatically skip test files (files with names containing .test. or .spec.).
- ESLint 8.0.0 or higher
- Next.js 13.4.0 or higher (with App Router)
MIT
Contributions are welcome! Please feel free to submit a Pull Request.
After cloning the repository and installing dependencies:
`bash`
npm install
npm test
The tests verify that both rules correctly identify valid and invalid usage of the 'use client'` directive.