ESLint

Next.jsは、ESLintと統合されたエクスペリエンスをすぐに利用できます。`package.json` に `next lint` をスクリプトとして追加してください。

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

その後、`npm run lint` または `yarn lint` を実行してください。

yarn lint

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

yarn lint

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

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

❯ 厳格（推奨）
基本
キャンセル

次の3つのオプションのいずれかを選択できます。

• **厳格**: Next.jsの基本ESLint設定と、より厳格なCore Web Vitalsルールセットが含まれています。ESLintを初めて設定する開発者には、この設定をお勧めします。

  .eslintrc.json

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

• **基本**: Next.jsの基本ESLint設定が含まれています。

  .eslintrc.json

  {
    "extends": "next"
  }

• **キャンセル**: ESLint設定は含まれません。独自のカスタムESLint設定を行う場合にのみ、このオプションを選択してください。

2つの設定オプションのいずれかを選択すると、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がまだ設定されていない場合は、`next lint`を使用してESLintをこの設定と共に設定することをお勧めします。

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

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

• `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 アプリケーションの場所を eslint-plugin-next に指示できます。

{
  "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'], // Only run ESLint on the 'pages' and 'utils' directories during production builds (next build)
  },
}

同様に、--dir および --file フラグを next lint で使用して、特定のディレクトリとファイルをリントできます。

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

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

TypeScript

.eslintrc.json

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