ESLint

Next.js は箱から出してすぐ使える ESLint の統合エクスペリエンスを提供します。package.json にスクリプトとして next lint を追加します：

package.json
{
  "scripts": {
    "lint": "next lint"
  }
}

その後、npm run lint や yarn lint を実行します：

Terminal

yarn lint

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

Terminal

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 ファイルをプロジェクトの root に作成します。

エラーをキャッチしたいときに、毎回 next lint を実行することができます。ESLint が設定された後は、すべてのビルド（next build）中にも自動的に実行されます。エラーはビルドを失敗させますが、警告は失敗させません。

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

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

ESLint Config

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

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

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

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

ESLint Plugin

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

推奨コンフィギュレーションで有効

	ルール	説明
	@next/next/google-font-display	Google フォントのフォント表示の動作を強制します
	@next/next/google-font-preconnect	Google フォントに `preconnect` を使用していることを確認します
	@next/next/inline-script-id	インラインコンテンツを持つ `next/script` コンポーネントで `id` 属性を強制します
	@next/next/next-script-for-ga	Google Analytics のインラインスクリプトを使用する際には `next/script` コンポーネントを優先します
	@next/next/no-assign-module-variable	`module` 変数への代入を防ぎます
	@next/next/no-async-client-component	クライアントコンポーネントが非同期関数であることを防ぎます
	@next/next/no-before-interactive-script-outside-document	`pages/_document.js` の外部で `next/script` の `beforeInteractive` 戦略を使用することを防ぎます
	@next/next/no-css-tags	手動でのスタイルシートタグを防ぎます
	@next/next/no-document-import-in-page	`pages/_document.js` の外で `next/document` をインポートすることを防ぎます
	@next/next/no-duplicate-head	`pages/_document.js` で `<Head>` を重複して使用することを防ぎます
	@next/next/no-head-element	`<head>` 要素を使用することを防ぎます
	@next/next/no-head-import-in-document	`pages/_document.js` で `next/head` を使用することを防ぎます
	@next/next/no-html-link-for-pages	内部の Next.js ページへのナビゲートに `<a>` 要素を使用することを防ぎます
	@next/next/no-img-element	より遅いLCPと高い帯域幅のため、 `<img>` 要素を使用することを防ぎます
	@next/next/no-page-custom-font	ページのみのカスタムフォントを防ぎます
	@next/next/no-script-component-in-head	`next/head` コンポーネントで `next/script` の使用を防ぎます
	@next/next/no-styled-jsx-in-document	`pages/_document.js` に `styled-jsx` を使用することを防ぎます
	@next/next/no-sync-scripts	同期スクリプトを防ぎます
	@next/next/no-title-in-document-head	`next/document` から `<title>` を `Head` コンポーネントとともに使用することを防ぎます
	@next/next/no-typos	Next.js のデータフェッチング関数における一般的なタイプミスを防ぎます
	@next/next/no-unwanted-polyfillio	Polyfill.io からの重複したポリフィルを防ぎます

アプリケーションに既に ESLint が設定されている場合は、eslint-config-next を含めずにこのプラグインを直接拡張することをお勧めします。ただし、いくつかの条件が満たされている場合はその限りではありません。推奨プラグインルールセットを参照して、さらに詳しく知ってください。

カスタム設定

`rootDir`

プロジェクトで eslint-plugin-next を使用しており、Next.js が root ディレクトリにインストールされていない場合（例えば、モノレポなど）、Next.js アプリケーションがどこにあるかを settings プロパティを使用して .eslintrc で eslint-plugin-next に指示できます：

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

rootDir はパス（相対または絶対）、グロブ（例： "packages/*/"）、またはパスとグロブの配列にすることができます。

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

デフォルトで、Next.js は pages/、app/、components/、lib/、および src/ ディレクトリ内のすべてのファイルに対して ESLint を実行します。ただし、プロダクションビルドに対して next.config.js の eslint 設定で dirs オプションを使用することによりどのディレクトリを指定するか制御できます：

next.config.js
module.exports = {
  eslint: {
    dirs: ['pages', 'utils'], // プロダクションビルド（next build）中に "pages" と "utils" ディレクトリのみで ESLint を実行
  },
}

同様に、特定のディレクトリとファイルをリントするために next lint に --dir と --file フラグを使用できます：

Terminal

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

キャッシュ

パフォーマンスを向上させるため、ESLint によって処理されたファイルの情報はデフォルトでキャッシュされます。これは .next/cache または定義されたビルドディレクトリに保存されます。単一のソースファイルの内容以上に依存する ESLint ルールを含め、キャッシュを無効にする必要がある場合は、next lint に --no-cache フラグを使用してください。

Terminal

next lint --no-cache

ルールの無効化

サポートされているプラグイン（react、react-hooks、next）によって提供されるルールを変更したり無効にしたりしたい場合は、.eslintrc の rules プロパティを使用して直接変更できます：

.eslintrc.json
{
  "extends": "next",
  "rules": {
    "react/no-unescaped-entities": "off",
    "@next/next/no-page-custom-font": "off"
  }
}

Core Web Vitals

next/core-web-vitals ルールセットは、next lint が初めて実行され、厳密オプションが選択されたときに有効になります。

.eslintrc.json
{
  "extends": "next/core-web-vitals"
}

next/core-web-vitals は、Core Web Vitals に影響を与える場合に、デフォルトで警告となっている多数のルールを ESLint プラグインでエラーとして処理します。

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

TypeScript

Next.js の ESLint ルールに加えて、create-next-app --typescript により、TypeScript 固有のリントルールが next/typescript と共に設定に追加されます：

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

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

他のツールとの使用

Prettier

ESLint は、コードのフォーマットルールも含んでおり、既存の Prettier 設定と競合することがあります。ESLint と Prettier を連携させるために、ESLint 設定に eslint-config-prettier を追加することをお勧めします。

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

Terminal
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 を追加します：

.eslintrc.json
{
  "extends": ["next", "prettier"]
}

lint-staged

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

.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
Babel が Next.js 内で設定されている方法と異なる特定の parserOptions を定義している（Babel の設定をカスタマイズしている場合を除き、これは推奨されません）
インポートを処理するために Node.js および / または TypeScript resolvers が定義された eslint-plugin-import をインストールしている

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

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

このプラグインは next lint を実行せずにプロジェクトに通常通りインストールできます：

Terminal
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 を含めたい場合は、他の設定の後にそれが最後に拡張されることを確認してください。例えば：

.eslintrc.json
{
  "extends": ["eslint:recommended", "next"]
}

next 設定は、parser、plugins、および settings プロパティにデフォルト値を設定するのをすでに処理しています。これらのプロパティを手動で再宣言する必要はありません。特定のユースケースのために異なる設定が必要な場合を除き、これを行わないことをお勧めします。

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

ESLint Config​

ESLint Plugin​

カスタム設定​

rootDir​

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

キャッシュ​

ルールの無効化​

Core Web Vitals​

TypeScript​

他のツールとの使用​

Prettier​

lint-staged​

既存設定の移行​

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

追加の設定​

ESLint Config

ESLint Plugin

カスタム設定

`rootDir`

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

キャッシュ

ルールの無効化

Core Web Vitals

TypeScript

他のツールとの使用

Prettier

lint-staged

既存設定の移行

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

追加の設定