🚀

【Next.js和訳】Basic Features/ESLint

2021/10/02に公開・約9,800字

Next.js

tech

この記事について

この記事は、Basic Features/ESLintの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

ESlint

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

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

その後、npm run lintまたはyarn lintを実行します。

yarn lint

まだ ESLint がアプリケーションに設定されていない場合は、インストールと設定の手順を説明します。

yarn lint
# You'll see a prompt like this:
#
# ? How would you like to configure ESLint?
#
# ❯   Base configuration + Core Web Vitals rule-set (recommended)
#     Base configuration
#     None

次の 3 つのうち、いずれかを選択できます。

Strict: Next.js の基本的な ESLint の構成に加えて、より厳しいCore Web Vitalsのルールセットを含みます。開発者が初めて ESLint を設定するときに推奨される設定です。

{
  "extends": "next/core-web-vitals"
}

Base: Next.js のベースとなる ESLint の設定を含みます。

{
  "extends": "next"
}

Cancel: ESLint の設定を行いません。独自のカスタム ESLint コンフィギュレーションを設定する場合にのみ、このオプションを選択します。

2 つの設定オプションのいずれかが選択された場合、Next.js は自動的にeslintとeslint-config-nextを開発用の依存関係としてアプリケーションにインストールし、選択した設定を含む.eslintrc.jsonファイルをプロジェクトのルートに作成します。

これで、ESLint を実行するたびにnext lintを実行してエラーを検出できるようになります。ESLint が設定されると、毎回のビルド時にも自動的に実行されます（next build）。エラーの場合はビルドに失敗しますが、警告の場合は失敗しません。

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

ESlint の設定

デフォルトの設定（eslint-config-next）には、Next.js で最適なリンティングを行うために必要なものがすべて含まれています。アプリケーションに ESLint が設定されていない場合は、next lintを使用して、この設定と一緒に ESLint を設定することをお勧めします。

以下の ESLint プラグインの推奨ルールセットはすべてeslint-config-nextで使用されます。

eslint-config-nextパッケージでは、共有可能な設定の詳細を確認することができます。

これはnext.config.jsからの設定よりも優先されます。

ESlint プラグイン

Next.js では、esLint-plugin-nextという ESLint プラグインが基本構成にすでにバンドルされており、Next.js アプリケーションの一般的な問題や課題をキャッチすることができます。ルールの全容は以下の通りです。

ルール	説明
✔️ next/google-font-display	Google Fonts でオプションまたはスワップのフォント表示動作を強制する
✔️ next/google-font-preconnect	Google Fonts でプリコネクト使用を強制
✔️ next/link-passhref	カスタムリンクコンポーネントで passHref プロップの使用を強制する
✔️ next/no-css-tags	スタイルシートの手動タグを防ぐ
✔️ next/no-document-import-in-page	pages/document.js 以外での next/document のインポートの禁止
✔️ next/no-head-import-in-document	pages/document.js における next/head のインポートを禁止する。
✔️ next/no-html-link-for-pages	Link コンポーネントを持たないページへの HTML アンカーリンクを禁止する。
✔️ next/no-img-element	HTML の`<img>`要素の使用を禁止する。
✔️ next/no-page-custom-font	ページ限定のカスタムフォントの防止
✔️ next/no-sync-scripts	同期スクリプトを禁止する
✔️ next/no-title-in-document-head	`<title>`を Head from next/document で使用することを禁止する。
✔️ next/no-unwanted-polyfillio	Polyfill.io のポリフィルの重複を防ぐ。
✔️ next/inline-script-id	インラインコンテンツを持つ next/script コンポーネントに id 属性を強制する。
✔️ next/no-typos	Next.js の data fetching 関数の宣言にタイプミスがないかどうか
✔️ next/next-script-for-ga	スクリプトコンポーネントを使用して、スクリプトの読み込みを必要なときまで延期します。

✔️ : 推奨設定では有効

すでにアプリケーションに ESLint が設定されている場合は、いくつかの条件が揃わない限り、eslint-config-nextをインクルードするのではなく、このプラグインから直接拡張することをお勧めします。詳しくは「推奨プラグインのルールセット」を参照してください。

設定のカスタマイズ

rootDir

Next.js がルートディレクトリにインストールされていないプロジェクト（monorepo など）でeslint-plugin-nextを使用している場合、.eslintrcのsettingsプロパティを使って、Next.js アプリケーションの場所をeslint-plugin-nextに伝えることができます。

{
  "extends": "next",
  "settings": {
    "next": {
      "rootDir": "/packages/my-app/"
    }
  }
}

rootDirには、パス（相対パスまたは絶対パス）、グロブ（例："/packages/*/"）、またはパスやグロブの配列を指定します。

カスタムディレクトリのリンティング

デフォルトでは、Next.js はpages/、components/、lib/の各ディレクトリにあるすべてのファイルに対して ESLint を実行します。しかし、プロダクションビルドではnext.config.jsのeslint設定でdirsオプションを使用して、どのディレクトリを実行するかを指定できます。

module.exports = {
  eslint: {
    dirs: ["pages", "utils"], // ビルド時に、「pages」と「utils」ディレクトリに対してのみESLintを実行するようにしました（next build）。
  },
}

同様に、--dirフラグは次のnext lintにも使用できます。

next lint --dir pages --dir utils

キャッシング

パフォーマンスを向上させるために、ESLint が処理するファイルの情報はデフォルトでキャッシュされます。これは.next/cacheまたは定義されたビルドディレクトリに保存されます。1 つのソースファイルの内容以上に依存する ESLint ルールを含み、キャッシュを無効にする必要がある場合は、next lintで--no-cacheフラグを使用します。

next lint --no-cache

ルールの無効化

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

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

コアウェブバイタル

next/core-web-vitalsルールセットは、next lintが初めて実行され、strictオプションが選択されたときに有効になります。

{
  "extends": "next/core-web-vitals"
}

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

Prettier との併用

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

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

既存の設定を移行する

推奨されるプラグインのルールセット

すでにアプリケーションに ESLint が設定されていて、以下の条件が当てはまる場合。

以下のプラグインのうち 1 つ以上がすでにインストールされている（個別に、またはairbnbやreact-appなどの別のコンフィグを介して）。
- react
- react-hooks
- jsx-ally
- import
Next.js 内で Babel が設定されている方法とは異なる特定のparserOptionsを定義している（Babel の設定をカスタマイズしていない限り、これは推奨されません）。
eslint-plugin-importがインストールされており、インポートを処理するために Node.js や TypeScript のリゾルバが定義されている。

これらのプロパティがeslint-config-next内で設定されている方法を好む場合は、これらの設定を削除するか、代わりに Next.js の ESLint プラグインから直接拡張することをお勧めします。

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

このプラグインは、next lintを実行しなくても、プロジェクトに普通にインストールできます。

npm install --save-dev @next/eslint-plugin-next
# or
yarn add --dev @next/eslint-plugin-next

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

追加のコンフィグレーション

すでに別の ESLint 設定を使用していて、eslint-config-nextを含める場合は、他の設定の後に最後に拡張するようにしてください。たとえば、以下のようになります。

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

nextコンフィグレーションでは、parser、plugins、settingsの各プロパティのデフォルト値の設定がすでに行われています。ユースケースに応じて異なる構成が必要な場合を除き、これらのプロパティを手動で再宣言する必要はありません。他の共有可能な構成を含める場合は、これらのプロパティが上書きされたり変更されたりしないようにする必要があります。そうでない場合は、前述のように、nextコンフィグレーションと動作を共有する設定を削除したり、Next.js ESLint プラグインから直接拡張することをお勧めします。

Discussion

ログインするとコメントできます