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 はパス（相対または絶対）、グロブ（例: "packages/*/"）、またはパスやグロブの配列にすることができます。

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

デフォルトでは、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 に影響を与える場合、デフォルトでは警告である eslint-plugin-next の多くのルールをエラーに更新します。

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

TypeScript

Next.js の ESLint ルールに加え、create-next-app --typescript は next/typescript で TypeScript 固有のリンタールールを設定に追加します:

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

これらのルールは plugin:@typescript-eslint/recommended に基づいています。 詳細は typescript-eslint > Configs を参照してください。

他のツールとの連携

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が設定されている場合は注意が必要です:

• 以下のプラグインのいずれかが既にインストールされている場合（個別またはairbnb、react-appなどの別の設定経由）:
  • react
  • react-hooks
  • jsx-a11y
  • 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

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プラグインから拡張することを推奨します。