ESLint

Next.js はデフォルトで統合された ESLint 体験を提供します。package.json に next lint をスクリプトとして追加します:

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

そして npm run lint または yarn lint を実行します:

yarn lint

アプリケーションに ESLint がまだ設定されていない場合、インストールと設定プロセスがガイドされます。

yarn lint

次のようなプロンプトが表示されます:

? ESLint をどのように設定しますか？

❯ Strict (推奨)
Base
キャンセル

次の3つのオプションから選択できます:

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

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

• Base: Next.js の基本 ESLint 設定を含みます。

  {
    "extends": "next"
  }

• キャンセル: ESLint 設定を含みません。独自のカスタム ESLint 設定を計画している場合のみこのオプションを選択してください。

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

これで、ESLint を実行してエラーを検出するために next lint をいつでも実行できます。ESLint が設定されると、ビルド時 (next build) にも自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗させません。

next build 時に ESLint を実行したくない場合は、ESLint の無視 のドキュメントを参照してください。

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

ESLint 設定

デフォルトの設定 (eslint-config-next) には、Next.js で最適なデフォルトのリンター体験に必要なすべてが含まれています。アプリケーションに ESLint がまだ設定されていない場合、この設定とともに ESLint をセットアップするために next lint を使用することを推奨します。

eslint-config-next を他の ESLint 設定と一緒に使用したい場合は、追加設定 セクションを参照して、競合を引き起こさずに行う方法を学んでください。

eslint-config-next 内では、次の ESLint プラグインの推奨ルールセットがすべて使用されています:

• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-next

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

ESLint プラグイン

Next.js は、基本設定に既にバンドルされている ESLint プラグイン eslint-plugin-next を提供しており、Next.js アプリケーションで一般的な問題を捕捉することが可能です。ルールの完全なセットは以下の通りです:

推奨設定で有効

アプリケーションに既に ESLint が設定されている場合、いくつかの条件を満たす場合を除き、eslint-config-next を含める代わりに直接このプラグインから拡張することを推奨します。詳細については 推奨プラグインルールセット を参照してください。

カスタム設定

rootDir

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

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

rootDir には、パス（相対または絶対）、glob（例: `"packages/*/"）、またはパスや glob の配列を指定できます。

カスタムディレクトリとファイルのリンター実行

デフォルトでは、Next.js は pages/、app/、components/、lib/、src/ ディレクトリ内のすべてのファイルに対して ESLint を実行します。ただし、next.config.js の eslint 設定で dirs オプションを使用して、本番ビルド時にリンターを実行するディレクトリを指定できます:

module.exports = {
  eslint: {
    dirs: ['pages', 'utils'], // 本番ビルド時 (next build) に 'pages' と 'utils' ディレクトリのみで ESLint を実行
  },
}

同様に、next lint に対して --dir と --file フラグを使用して、特定のディレクトリとファイルをリンター実行できます:

next lint --dir pages --dir utils --file bar.js

キャッシュ

パフォーマンス向上のため、ESLint によって処理されたファイルの情報はデフォルトでキャッシュされます。これは .next/cache または定義した ビルドディレクトリ に保存されます。単一のソースファイルの内容以上のものに依存する 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"
  }
}

Core Web Vitals

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

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

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

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

他のツールとの併用

Prettier

ESLint にはコードフォーマットルールも含まれており、既存の Prettier 設定と競合する可能性があります。ESLint と Prettier を一緒に動作させるために、ESLint 設定に eslint-config-prettier を含めることを推奨します。

まず、依存関係をインストールします:

npm install --save-dev eslint-config-prettier

yarn add --dev eslint-config-prettier

pnpm add --save-dev eslint-config-prettier

bun add --dev eslint-config-prettier

次に、既存の ESLint 設定に prettier を追加します:

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

lint-staged

ステージングされた git ファイルに対してリンターを実行するために lint-staged で next lint を使用したい場合は、.lintstagedrc.js ファイルをプロジェクトのルートに追加し、--file フラグの使用を指定する必要があります。

const path = require('path')

const buildEslintCommand = (filenames) =>
  `next lint --fix --file ${filenames
    .map((f) => path.relative(process.cwd(), f))
    .join(' --file ')}`

module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
}

既存設定の移行

推奨プラグインルールセット

アプリケーションに既に ESLint が設定されており、以下のいずれかの条件が当てはまる場合:

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

その場合、eslint-config-next 内でこれらのプロパティがどのように設定されているかを好む場合はこれらの設定を削除するか、直接 Next.js ESLint プラグインから拡張することを推奨します:

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

このプラグインは、next lint を実行する必要なく、通常通りプロジェクトにインストールできます:

npm install --save-dev @next/eslint-plugin-next

yarn add --dev @next/eslint-plugin-next

pnpm add --save-dev @next/eslint-plugin-next

bun add --dev @next/eslint-plugin-next

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

追加設定

すでに別のESLint設定を使用していて、eslint-config-nextを含めたい場合は、他の設定の後に最後に拡張されるようにしてください。例:

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

next設定では、parser、plugins、settingsプロパティのデフォルト値がすでに設定されています。特別なユースケースで異なる設定が必要な場合を除き、これらのプロパティを手動で再宣言する必要はありません。

他の共有可能な設定を含める場合、これらのプロパティが上書きまたは変更されないようにする必要があります。そうでない場合は、next設定と動作を共有する設定を削除するか、前述のようにNext.js ESLintプラグインから直接拡張することを推奨します。