ESLint rules for NextJS App Router
npm install eslint-plugin-next-recommendedeslint-plugin-next-recommendedThis ESLint plugin helps in developing projects with NextJS, using the App Router feature.
!Usage Example of rule require-use-client
Before getting started, ensure that you have ESLint installed.
You can then install this plugin using:
``shnpm
npm install -D eslint-plugin-next-recommended
Usage
To start using the plugin, implement it in your ESLint configuration file as follows:
js
{
"plugins": [
// ...
"next-recommended"
]
}
`I also recommend that you extend the rules set by default, so that you don't need to add rule by rule inside your ESLint configuration file:
js
{
"extends": [
// ...
"plugin:next-recommended/recommended"
]
}
`$3
Currently, there isn't much customization to be done, but you can customize the severity of all rules.
It is not necessary to implement the code below, but it is an example of how you could modify the severity of each one.
js
{
"rules": {
"next-recommended/require-use-client": "warn",
"next-recommended/unnecessarily-client-declaration": "warn",
"next-recommended/async-component-no-hooks": "error",
"next-recommended/async-server-actions": "off",
"next-recommended/async-exported-server-actions": "off",
"next-recommended/export-server-actions-only": "warn"
}
}
`Rules
This rule enforces that hooks and interactivity are available only for files declared as "use client". It helps maintain consistency and aligns with Next.js documentation.
This rule identifies components that are declared with "use client" but lack interactivity, resulting in a component that runs unnecessarily on the client side.
You can configure this rule to automatically remove the "use client" statement when unnecessary, just follow the example:
js
{
"rules": {
"next-recommended/unnecessarily-client-declaration": ["warn", { "autoFix": true }],
}
}
`
For components declared as async, it is expected not to run client-side. Async components are intended to run on the server side and do not support specific client-side functionality such as hooks. This error can often result from inadvertently adding 'use client' to a module originally written for the server. See the Next.js documentation for additional context.
This rule ensures that server actions are declared as async functions, aligning with best practices for server-side functionality.
In server action files, this rule enforces that all exported functions are async, maintaining consistency and preventing NextJS errors. It may be worth highlighting that it is possible to export a non-async function preventing NextJS from generating an error, but I predict that this is not a recommended practice.Please feel free to make suggestions or report bugs. Let's improve this plugin together.