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を初めて設定する開発者に推奨される設定です。

  .eslintrc.json

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

• Base: Next.jsのベースESLint設定が含まれます。

  .eslintrc.json

  {
    "extends": "next"
  }

• Cancel: ESLint設定を含みません。独自のカスタムESLint設定を行う予定がある場合にのみ、このオプションを選択してください。

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

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

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

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

ESLint設定

デフォルトの設定（eslint-config-next）には、Next.jsで最適な箱から出してすぐに使えるリンティングエクスペリエンスに必要なすべてが含まれています。アプリケーションにまだESLintが設定されていない場合、この設定と共にESLintを設定するためにnext lintを使用することをお勧めします。

他のESLint設定と共にeslint-config-nextを使用する場合は、競合を引き起こさずに設定する方法については、追加の設定セクションを参照してください。

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プロパティを使用して、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を初めて実行し、厳格オプションを選択したときに有効になります。

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

next/core-web-vitalsは、Core Web Vitalsに影響するデフォルトで警告となっているルールの一部をエラーに更新します。

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

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

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の設定をカスタマイズしていない限り推奨されません）
• 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プラグインから直接拡張することをお勧めします。