Zenn
🚨

Next.js version 11.0.0 で ESLint を使うために公式ドキュメントを紐解く

2021/07/05に公開
Next.js
ESLint
tech

ESLint.org

docs/rules

npm/ESLint

Next.js/ESLint

バージョン11.0.0以降、Next.jsは統合されたESLint体験をすぐに提供します。
next lintをスクリプトとしてpackage.jsonに追加します。

"scripts": {
  "lint": "next lint"
}

とのことなので npx create-next-app を実行して確認してみる


すると確かにセットアップ中に eslint と eslint-config-next がインストールされている



セットアップ後のファイルを確認したところ、ドキュメントにあるとおり、 package.json に next lint の scripts がある



eslintrc (拡張子はない) に "next": "eslint" も含まれている
(今回の設定で eslintrc に自動的に含まれる next/core-web-vitals の説明は後述します)



npm か yarn で以下のコマンドをターミナルに入力すると next lint scripts を実行可能

yarn lint

npm run lint


まだESLintがアプリケーションに設定されていない場合は必要なパッケージのインストールを案内します。

yarn lint

# 以下のような説明があります:
#
# Please install eslint and eslint-config-next by running:
# (eslint と eslint-config-next をインストールしてください)
#         yarn add --dev eslint eslint-config-next
#
# ...


ESLint の設定ファイルが存在しない場合、 Next.js はプロジェクトのルートに .eslintrc ファイルを自動的に作成します。

eslintrc
{
  "extends": "next"
}

ESLint を実行してエラーを検出するたびに next lint を実行することができるようになりました。

デフォルトの基本設定("extends": "next")はいつでもアップデート可能で、ESLint設定がない場合にのみ含まれます。

開発中にコードエディタで直接警告やエラーを表示するには、適切な統合機能を使用することをお勧めします。

Linting During Builds

build 時の linting

ESLintが設定されると、 build の度に自動的に実行されます。
エラーの場合はビルドに失敗しますが、警告の場合は失敗しません。

build の際、ESLintを実行させたくない場合は、 Ignoring ESLint のドキュメントを参照してください。

Linting Custom Directories

ESLint が有効になるディレクトリを任意で設定することもできるようです

デフォルトでは、 Next.js は pages components lib ディレクトリ内のすべてのファイルに対して ESLint を実行します。

ただし、プロダクションビルドでは next.config.js の eslint 設定で dirs オプションを使ってどのディレクトリで実行するかを指定できます。

next.config.js
module.exports = {
  eslint: {
    dirs: ['pages', 'utils'],
    // 'pages' と 'utils' でのみ ESLint を実行する
  },
}


yarn lint 時に --dir を使用し、同様の設定が可能

yarn lint --dir pages --dir utils

ESLint Plugin

Next.jsにはESLintプラグインである eslint-plugin-next が用意されており、Next.jsアプリケーションの一般的な問題や課題を簡単に捉えることができます。ルールの全容

Base Configuration

Next.jsベースのESLint設定は、next lintの初回実行時に自動的に生成されます。

{
  "extends": "next"
}

この設定は、以下のESLintプラグインの推奨ルールセットを拡張するものです。
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-next

シェアできる設定の詳細は eslint-config-next パッケージに記載されています。

Disabling Rules

ルールの無効化

サポートされているプラグイン react react-hooks next が提供するルールを変更したり無効にしたりしたい場合は、 .eslintrc の rules プロパティを使って直接変更することができます。

例)

.slintrc
{
  "extends": "next",
  "rules": {
    "react/no-unescaped-entities": "off",
    "@next/next/no-page-custom-font": "off",
  }
}


.slintrc
{
  "extends": ["eslint:recommended", "next"]
}

next の設定では、 parser plugins の各プロパティのデフォルト値の設定がすでに行われています。
ユースケースに応じて異なる構成が必要な場合を除き、これらのプロパティを手動で再宣言する必要はありません。
他の共有可能な構成を含める場合は、これらのプロパティが上書きされたり変更されたりしないように注意する必要があります。

Core Web Vitals

より厳しい next/core-web-vitals ルールセットを .eslintrc で追加することもできます。

.eslintrc
{
  "extends": ["next", "next/core-web-vitals"]
}

next/core-web-vitals は、 eslint-plugin-next を更新して、 Core Web Vitals に影響を与える場合にデフォルトで警告となるいくつかのルールをエラーにしました。

Create Next App で構築された新しいアプリケーションには、 next および next/core-web-vitals の両方のエントリーポイントが自動的に含まれます。

Usage with Prettier

Prettier との併用

ESLint にはコードフォーマットのルールが含まれており、既存の Prettier のセットアップと衝突する可能性があります。
ESLint と Prettier を連動させるために、 ESLint の設定に eslint-config-prettier を含めることをお勧めします。

.eslintrc
{
  "extends": ["next", "prettier"]
}

Migrating Existing Config

既存設定の移行

すでにアプリケーションに ESLint が設定されている場合は、共有可能な設定ではなく、 Next.js の ESLint プラグインから直接拡張することをお勧めします。

module.exports = {
  extends: [
    //...
    'plugin:@next/next/recommended',
  ],
}

これにより、同じプラグインやパーサーを複数の設定でインポートすることによる衝突のリスクを排除することができます。

公式ドキュメントは以上です

個人的な結論

これから新規プロジェクトを作る場合はデフォルトで設定される以下の内容で問題無いと判断
ファイルに拡張子が無いが、 Next.js の仕様であり問題ないと判断

.eslintrc
{
  "extends": ["next", "next/core-web-vitals"]
}



既存の Next.js プロジェクトへの ESLint ルールの適用については、ドキュメント通り以下の設定を追記するのがベストプラクティスと判断

eslintrc.js
module.exports = {
...//
  extends: [
    //...
    'plugin:@next/next/recommended',
  ],
}

Discussion