🚀

【Next.js和訳】Basic Features/ESLint

9 min read
Next.js
tech

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、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）。エラーの場合はビルドに失敗しますが、警告の場合は失敗しません。

next build時にESLintを実行しないようにするには、Ignoring ESLintのドキュメントを参照してください。

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

ESlintの設定

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

eslint-config-nextを他のESLint設定と一緒に使用したい場合は、Additional Configurationsのセクションを参照して、コンフリクトを起こさないように設定してください。

以下の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に影響を与える場合にデフォルトで警告となるいくつかのルールをエラーにしました。

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

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

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