https://github.com/felipstein/eslint-plugin-next-recommended

Additional rules to use with next and eslint
https://github.com/felipstein/eslint-plugin-next-recommended

app-router approuter eslint eslint-next eslintnext next next-app-router next-recommended next13 nextapprouter nextjs nextjs13 nextrecommended rules useclient useserver

Last synced: 20 days ago
JSON representation

Additional rules to use with next and eslint

• Host: GitHub
• URL: https://github.com/felipstein/eslint-plugin-next-recommended
• Owner: Felipstein
• Created: 2023-10-16T15:08:49.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-10-18T00:07:01.000Z (about 1 year ago)
• Last Synced: 2024-11-28T17:12:07.622Z (24 days ago)
• Topics: app-router, approuter, eslint, eslint-next, eslintnext, next, next-app-router, next-recommended, next13, nextapprouter, nextjs, nextjs13, nextrecommended, rules, useclient, useserver
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/eslint-plugin-next-recommended
• Size: 46.9 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# `eslint-plugin-next-recommended`

This ESLint plugin helps in developing projects with NextJS, using the App Router feature.

![Usage Example of rule require-use-client](https://i.imgur.com/bqrDGPO.gif)

## Installation

Before getting started, ensure that you have ESLint installed.

You can then install this plugin using:

```sh

# npm

npm install -D eslint-plugin-next-recommended

# yarn

yarn add -D eslint-plugin-next-recommended

# pnpm

pnpm 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"

  ]

}

```

### Custom Configuration

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

`next-recommended/require-use-client`

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.

`next-recommended/unnecessarily-client-declaration`

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 }],

  }

}

```

`next-recommended/async-component-no-hooks`

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](https://nextjs.org/docs/messages/no-async-client-component) for additional context.

`next-recommended/async-server-actions`

This rule ensures that server actions are declared as async functions, aligning with best practices for server-side functionality.

`next-recommended/async-exported-server-actions`

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.

`next-recommended/export-server-actions-only`

For server action files, this rule allows only the export of functions related to server actions. Exporting anything other than functions within this context may raise exceptions in Next.js.

## Future Features:

- Rule to control exports within a page;

- Tests.



Please feel free to make suggestions or report bugs. Let's improve this plugin together.