コンテンツへスキップ
APIリファレンス設定ESLint

ESLint

Next.jsは、ベース構成にすでにバンドルされているESLintプラグインeslint-plugin-nextを提供しており、これによりNext.jsアプリケーションにおける一般的な問題を発見することができます。

リファレンス

以下の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-pagenext/documentをpages/_document.jsの外でインポートすることを防止します。
@next/next/no-duplicate-headpages/_document.jsでの<Head>の重複使用を防止します。
@next/next/no-head-element<head>要素の使用を防止します。
@next/next/no-head-import-in-documentnext/headをpages/_document.jsで使用することを防止します。
@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からの重複したポリフィルを防止します。

開発中にコードエディタで警告やエラーを直接表示するために、適切なインテグレーションの使用を推奨します。

例

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

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

next.config.js
module.exports = {
  eslint: {
    dirs: ['pages', 'utils'], // Only run ESLint on the 'pages' and 'utils' directories during production builds (next build)
  },
}

同様に、--dirおよび--fileフラグは、特定のディレクトリやファイルをLintするためにnext lintで使用できます。

ターミナル
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 is available after 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フラグを使用してください。

ターミナル
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 is available after 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 lintが初めて実行され、strictオプションが選択されたときに、next/core-web-vitalsルールセットが有効になります。

eslint.config.mjs
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat({
  // import.meta.dirname is available after 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は、`eslint-plugin-next`を更新し、Core Web Vitalsに影響を与える場合、デフォルトで警告であるいくつかのルールをエラーとして扱います。

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

TypeScriptとの連携

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

eslint.config.mjs
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat({
  // import.meta.dirname is available after 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を含めることを推奨します。

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

ターミナル
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 is available after Node.js v20.11.0
  baseDirectory: import.meta.dirname,
})

const eslintConfig = [
  ...compat.config({
    extends: ['next', 'prettier'],
  }),
]

export default eslintConfig

ステージングされたファイルでのLintの実行

ステージングされたGitファイルでリンターを実行するためにlint-stagedと一緒にnext lintを使用したい場合は、--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],
}

本番ビルド中のLintの無効化

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

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
}
 
export default nextConfig

既存の設定の移行

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

以下の条件が真の場合

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

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

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

このプラグインは、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

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

追加の設定

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

eslint.config.mjs
import js from '@eslint/js'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat({
  // import.meta.dirname is available after 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プラグインから直接拡張することをお勧めします。