Menu

ESLintプラグイン

Next.jsは、Next.jsアプリケーションでの一般的な問題を検出するためのESLintプラグイン（eslint-plugin-next）を提供しています。このプラグインは基本設定にすでにバンドルされています。

リファレンス

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

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

ルール

完全なルールセットは以下の通りです：

推奨設定で有効ルール説明
@next/next/google-font-displayGoogle Fontsのfont-display動作を強制します。
@next/next/google-font-preconnectGoogle Fontsでpreconnectが使用されていることを確認します。
@next/next/inline-script-idインラインコンテンツを持つnext/scriptコンポーネントにid属性を強制します。
@next/next/next-script-for-gaGoogle Analyticsのインラインスクリプトを使用する場合は、next/scriptコンポーネントを推奨します。
@next/next/no-assign-module-variablemodule変数への代入を防止します。
@next/next/no-async-client-componentクライアントコンポーネントが非同期関数になることを防止します。
@next/next/no-before-interactive-script-outside-documentnext/scriptのbeforeInteractive戦略をpages/_document.js以外で使用することを防止します。
@next/next/no-css-tags手動でのスタイルシートタグの使用を防止します。
@next/next/no-document-import-in-pagepages/_document.js以外でのnext/documentのインポートを防止します。
@next/next/no-duplicate-headpages/_document.jsでの<Head>の重複使用を防止します。
@next/next/no-head-element<head>要素の使用を防止します。
@next/next/no-head-import-in-documentpages/_document.jsでのnext/headの使用を防止します。
@next/next/no-html-link-for-pages内部Next.jsページへのナビゲーションに<a>要素を使用することを防止します。
@next/next/no-img-elementLCPが遅くなり、より多くの帯域幅を消費する<img>要素の使用を防止します。
@next/next/no-page-custom-fontページ専用のカスタムフォントを防止します。
@next/next/no-script-component-in-headnext/headコンポーネント内でのnext/scriptの使用を防止します。
@next/next/no-styled-jsx-in-documentpages/_document.jsでのstyled-jsxの使用を防止します。
@next/next/no-sync-scripts同期スクリプトを防止します。
@next/next/no-title-in-document-headnext/documentからのHeadコンポーネントでの<title>の使用を防止します。
@next/next/no-typosNext.jsのデータフェッチング関数での一般的な誤字を防止します
@next/next/no-unwanted-polyfillioPolyfill.ioからの重複するポリフィルを防止します。

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

例

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

デフォルトでは、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

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

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

eslint.config.mjs
import { FlatCompat } from '@eslint/eslintrc'
 
const compat = new FlatCompat({
  // import.meta.dirnameはNode.js v20.11.0以降で利用可能
  baseDirectory: import.meta.dirname,
})
 
const eslintConfig = [
  ...compat.config({
    extends: ['next'],
    settings: {
      next: {
        rootDir: 'packages/my-app/',
      },
    },
  }),
]
 
export default eslintConfig

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

キャッシュの無効化

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

Terminal
next lint --no-cache

ルールの無効化

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

eslint.config.mjs
import { FlatCompat } from '@eslint/eslintrc'
 
const compat = new FlatCompat({
  // import.meta.dirnameはNode.js v20.11.0以降で利用可能
  baseDirectory: import.meta.dirname,
})
 
const eslintConfig = [
  ...compat.config({
    extends: ['next'],
    rules: {
      'react/no-unescaped-entities': 'off',
      '@next/next/no-page-custom-font': 'off',
    },
  }),
]
 
export default eslintConfig

Core Web Vitalsとの使用

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

eslint.config.mjs
import { FlatCompat } from '@eslint/eslintrc'
 
const compat = new FlatCompat({
  // import.meta.dirnameはNode.js v20.11.0以降で利用可能
  baseDirectory: import.meta.dirname,
})
 
const eslintConfig = [
  ...compat.config({
    extends: ['next/core-web-vitals'],
  }),
]
 
export default eslintConfig

next/core-web-vitalsは、Core Web Vitalsに影響するルールがデフォルトで警告となっている場合、それらをエラーとするようにeslint-plugin-nextを更新します。

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

TypeScriptとの使用

Next.jsのESLintルールに加えて、create-next-app --typescriptはnext/typescriptを使用してTypeScript固有のリントルールも設定に追加します：

eslint.config.mjs
import { FlatCompat } from '@eslint/eslintrc'
 
const compat = new FlatCompat({
  // import.meta.dirnameはNode.js v20.11.0以降で利用可能
  baseDirectory: import.meta.dirname,
})
 
const eslintConfig = [
  ...compat.config({
    extends: ['next/core-web-vitals', 'next/typescript'],
  }),
]
 
export default eslintConfig

これらのルールは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を追加します：

eslint.config.mjs
import { FlatCompat } from '@eslint/eslintrc'
 
const compat = new FlatCompat({
  // import.meta.dirnameはNode.js v20.11.0以降で利用可能
  baseDirectory: import.meta.dirname,
})
 
const eslintConfig = [
  ...compat.config({
    extends: ['next', 'prettier'],
  }),
]
 
export default eslintConfig

ステージングファイルに対するリントの実行

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

.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],
}

本番ビルド時のリンティングの無効化

next build中にESLintを実行したくない場合は、next.config.jsでeslint.ignoreDuringBuildsオプションをtrueに設定できます：

next.config.ts
TypeScript
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  eslint: {
    // 注意：これにより、プロジェクトにESLintエラーがあっても
    // 本番ビルドが正常に完了できるようになります。
    ignoreDuringBuilds: true,
  },
}
 
export default nextConfig

既存の設定の移行

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

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

以下の条件が当てはまる場合：

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

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

eslint.config.mjs
import js from '@eslint/js'
import { FlatCompat } from '@eslint/eslintrc'
 
const compat = new FlatCompat({
  // import.meta.dirnameはNode.js v20.11.0以降で利用可能
  baseDirectory: import.meta.dirname,
  recommendedConfig: js.configs.recommended,
})
 
const eslintConfig = [
  ...compat.config({
    extends: ['eslint:recommended', 'next'],
  }),
]
 
export default eslintConfig

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

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