ESLint プラグイン

Next.js は ESLint プラグイン @next/eslint-plugin-next を提供しており、これは基本設定にバンドルされています。これにより、Next.js アプリケーションにおける一般的な問題やエラーを検出できます。

ESLint のセットアップ

ESLint CLI (フラット設定) で迅速に lint を機能させる

1. ESLint と Next.js 設定をインストールする

   pnpmnpmyarnbun

   ターミナル

   pnpm add -D eslint eslint-config-next @eslint/eslintrc

2. Next.js 設定で eslint.config.mjs を作成する

   eslint.config.mjs

   import { defineConfig, globalIgnores } from 'eslint/config'
   import nextVitals from 'eslint-config-next/core-web-vitals'
    
   const eslintConfig = defineConfig([
     ...nextVitals,
     // Override default ignores of eslint-config-next.
     globalIgnores([
       // Default ignores of eslint-config-next:
       '.next/**',
       'out/**',
       'build/**',
       'next-env.d.ts',
     ]),
   ])
    
   export default eslintConfig

3. ESLint を実行する

   pnpmnpmyarnbun

   ターミナル

   pnpm exec eslint .

リファレンス

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

• eslint-plugin-react
• eslint-plugin-react-hooks
• @next/eslint-plugin-next

ルール

すべてのルールの完全なセットは次のとおりです

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

例

モノレポ内のルートディレクトリを指定する

Next.js がルートディレクトリにインストールされていないプロジェクト (例: モノレポ) で @next/eslint-plugin-next を使用している場合、eslint.config.mjs の settings プロパティを使用して、@next/eslint-plugin-next に Next.js アプリケーションの場所を伝えることができます。

import { defineConfig } from 'eslint/config'
import eslintNextPlugin from '@next/eslint-plugin-next'
 
const eslintConfig = defineConfig([
  {
    plugins: {
      next: eslintNextPlugin,
    },
    settings: {
      next: {
        rootDir: 'packages/my-app/',
      },
    },
    files: [
      // ...files
    ],
    ignores: [
      // ...ignores
    ],
  },
])
 
export default eslintConfig

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

ルールの無効化

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

import { defineConfig, globalIgnores } from 'eslint/config'
import nextVitals from 'eslint-config-next/core-web-vitals'
 
const eslintConfig = defineConfig([
  ...nextVitals,
  {
    rules: {
      'react/no-unescaped-entities': 'off',
      '@next/next/no-page-custom-font': 'off',
    },
  },
  // Override default ignores of eslint-config-next.
  globalIgnores([
    // Default ignores of eslint-config-next:
    '.next/**',
    'out/**',
    'build/**',
    'next-env.d.ts',
  ]),
])
 
export default eslintConfig

Core Web Vitals と共に

ESLint 設定で拡張することにより、next/core-web-vitals ルールセットを有効にします。

import { defineConfig, globalIgnores } from 'eslint/config'
import nextVitals from 'eslint-config-next/core-web-vitals'
 
const eslintConfig = defineConfig([
  ...nextVitals,
  // Override default ignores of eslint-config-next.
  globalIgnores([
    // Default ignores of eslint-config-next:
    '.next/**',
    'out/**',
    'build/**',
    'next-env.d.ts',
  ]),
])
 
export default eslintConfig

next/core-web-vitals は @next/eslint-plugin-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 固有の lint ルールも設定に追加します。

import { defineConfig, globalIgnores } from 'eslint/config'
import nextVitals from 'eslint-config-next/core-web-vitals'
import nextTs from 'eslint-config-next/typescript'
 
const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  // Override default ignores of eslint-config-next.
  globalIgnores([
    // Default ignores of eslint-config-next:
    '.next/**',
    'out/**',
    'build/**',
    'next-env.d.ts',
  ]),
])
 
export default eslintConfig

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

Prettier と共に

ESLint にはコードフォーマットルールも含まれており、既存の Prettier セットアップと競合する可能性があります。ESLint と Prettier を連携させるために、eslint-config-prettier を ESLint 設定に含めることをお勧めします。

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

pnpm add -D eslint-config-prettier

次に、既存の ESLint 設定に prettier を追加します

import { defineConfig, globalIgnores } from 'eslint/config'
import nextVitals from 'eslint-config-next/core-web-vitals'
import prettier from 'eslint-config-prettier/flat'
 
const eslintConfig = defineConfig([
  ...nextVitals,
  prettier,
  // Override default ignores of eslint-config-next.
  globalIgnores([
    // Default ignores of eslint-config-next:
    '.next/**',
    'out/**',
    'build/**',
    'next-env.d.ts',
  ]),
])
 
export default eslintConfig

ステージングされたファイルに lint を実行する

ESLint を lint-staged で Git でステージングされたファイルに実行したい場合は、プロジェクトのルートにある .lintstagedrc.js ファイルに以下を追加します。

const path = require('path')
 
const buildEslintCommand = (filenames) =>
  `eslint --fix ${filenames
    .map((f) => `"${path.relative(process.cwd(), f)}"`)
    .join(' ')}`
 
module.exports = {
  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
}

既存の設定の移行

アプリケーションにすでに ESLint が設定されている場合は、いくつかの条件が満たされない限り、eslint-config-next を含めるのではなく、このプラグインを直接拡張することをお勧めします。

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

以下の条件が true の場合

• 以下のプラグインのいずれか (個別に、または 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',
  ],
}

プラグインは通常、プロジェクトにインストールできます

pnpm add -D @next/eslint-plugin-next

これにより、複数の設定間で同じプラグインまたはパーサーをインポートすることによって発生する可能性のある競合やエラーのリスクが排除されます。

追加の設定

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

import { defineConfig, globalIgnores } from 'eslint/config'
import nextPlugin from '@next/eslint-plugin-next'
 
const eslintConfig = defineConfig([
  nextPlugin.configs['core-web-vitals'],
  // List of ignore patterns.
  globalIgnores([]),
])
 
export default eslintConfig

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

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