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. eslint.config.mjs を Next.js の設定で作成する

   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 に影響を与える場合です。

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

TypeScript を使用する場合

Next.js ESLint ルールに加えて、create-next-app --typescript は TypeScript 固有の lint ルールを next/typescript とともに設定に追加します。

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 の実行

Git でステージングされたファイルに対してリンターを実行するために ESLint を lint-staged と連携させたい場合は、プロジェクトのルートにある .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 を含めるのではなく、このプラグインから直接拡張することを推奨します。

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

以下の条件が真である場合

• 以下のプラグインのいずれか (個別に、または airbnb や react-app のような別の設定経由) が既にインストールされている。
  • react
  • react-hooks
  • jsx-a11y
  • import
• Next.js で Babel が構成されている方法とは異なる特定の parserOptions を定義した (これは、Babel 設定をカスタマイズした場合を除き、推奨されません)。
• Node.js および/または TypeScript 用の eslint-plugin-import がインストールされており、リゾルバー がインポートを処理するために定義されている。

これらのプロパティの構成方法を好む場合は、それらの設定を削除するか、または代わりに 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 プラグインから直接拡張することを推奨します。