ESLint

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

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

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

yarn lint

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

yarn lint

このような prompt が表示されます：

? ESLint をどのように構成しますか？

❯ ❯ 厳格(推奨) BaBase Cancel

次の 3 つの options のうちの 1 つを選択できます：

• Strict： Next.js の基本的な ESLint 設定と、より厳格なCore Web Vitals rule-setを含みます。これは、初めて ESLint を設定する開発者に推奨される設定です。

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

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

  {
    "extends": "next"
  }
  

• キャンセル： ESLint の設定は含まれません。自分でカスタム ESLint の設定を行う予定がある場合のみ、このオプションを選択してください。

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

あなたは今、error を見つけるために ESLint を実行したいたびにnext lintを実行することができます。一度 ESLint がセットアップされると、それはまた毎回の build (next build)でも自動的に実行されます。error は build を失敗させますが、警告はそうではありません。

もしnext build間に ESLint を実行したくない場合は、ESLint を無視するに関するドキュメンテーションを参照してください。

適切なintegration を使用して、development 中の code エディターで警告や error を直接見ることをお勧めします。

ESLint Config

default 設定(eslint-config-next)は、Next.js で最適な箱から出したままのリンティング体験をするために必要なすべてを含んでいます。すでに ESLint がアプリケーションに設定されていない場合は、この設定とともに ESLint を設定するためにnext lintを使用することをお勧めします。

eslint-config-nextを他の ESLint 設定と共に使用したい場合は、競合を引き起こすことなくそれを行う方法を学ぶために追加の設定セクションを参照してください。

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

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

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

ESLint Plugin

Next.js は、eslint-plugin-next という ESLint plugin を提供します。これは基本設定に既にバンドルされており、Next.js アプリケーションの一般的な問題や問題を検出することが可能になります。ルールの全体セットは次の通りです：

推奨設定で有効化されています

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

カスタム Settings

rootDir

eslint-plugin-nextを Next.js が root ディレクトリにインストールされていないプロジェクト(モノレポなど)で使用している場合、settingsプロパティを.eslintrcに使用して、eslint-plugin-nextにどこで Next.js アプリケーションを見つけるかを伝えることができます。

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

rootDirは、path(相対または絶対)、glob(つまり、"packages/*/")、または paths と/または globs の配列にすることができます。

Linting Custom Directories and Files

default では、Next.js は pages/, app/, components/, lib/, src/ ディレクトリのすべてのファイルに対して ESLint を実行します。しかし、next.config.js の eslint config にある dirs オプションを使用して、production builds のためにどのディレクトリを指定するかを設定できます：

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

Caching

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

next lint --no-cache

Disabling Rules

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

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

コアウェブバイタルズ

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

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

next/core-web-vitalsは、Core Web Vitals に影響を与える場合、eslint-plugin-nextを default で警告となっているいくつかのルールを error に更新します。

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

Usage With Other Tools

Prettier

ESLint には、既存のPrettier セットアップと競合することがある code フォーマットルールも含まれています。我々は、ESLint と Prettier を一緒に動作させるために、ESLint config に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 config にprettierを追加します：

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

lint-staged

もし、ステージングされた git ファイルでリンターを実行するために next lint を lint-staged と一緒に使用したい場合、 --file フラグの使用を指定するために、プロジェクトの 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],
}

Migrating Existing Config

推奨される Plugin ルールセット

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

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

それから、これらのプロパティがeslint-config-next 内でどのように設定されているかを優先する場合、これらの settings を削除することをお勧めします。または、代わりに Next.js ESLint plugin から直接継承することをお勧めします。

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

あなたのプロジェクトに plugin は、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

これにより、同じ plugin やパーサーを複数の設定にインポートすることによって発生する可能性のある衝突や error のリスクが排除されます。

追加設定

すでに別の ESLint 設定を使用しており、eslint-config-next を含めたい場合は、他の設定の後に最後に拡張されていることを確認してください。例えば:

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

next設定はすでに、parser、plugins、およびsettingsプロパティの default 値の設定を処理します。使用ケースに応じた異なる設定が必要な場合を除き、これらのプロパティを手動で再宣言する必要はありません。

他の共有可能な設定を含める場合、これらのプロパティが上書きまたは変更されないことを確認する必要があります。それ以外の場合、上記で述べたように、next設定と同じ動作を共有する設定を削除するか、 Next.js ESLint plugin から直接拡張することをお勧めします。