メインコンテンツまでスキップ

ESLintプラグイン

Next.jsは、一般的な問題をキャッチ可能にするESLintプラグイン、eslint-plugin-next を基本設定内に既にバンドルしています。

参照​

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

これは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-componentclient componentが非同期関数になるのを防ぎます
@next/next/no-before-interactive-script-outside-documentpages/_document.js外でのnext/scriptのbeforeInteractive戦略の使用を防ぎます
@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からの重複するpolyfillsを防ぎます

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

例​

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

デフォルトでは、Next.jsはpages/、app/、components/、lib/、src/ディレクトリ内のすべてのファイルに対してESLintを実行します。ただし、特定のディレクトリを指定して、next.config.jsのeslint設定でdirsオプションを使用して、プロダクションビルド時にESLintを実行できます：

next.config.js
module.exports = {
  eslint: {
    dirs: ['pages', 'utils'], // プロダクションビルド時に'pages'と'utils'ディレクトリのみに対してESLintを実行します（next build）
  },
}

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

Terminal
next lint --dir pages --dir utils --file bar.js

モノレポ内のrootディレクトリの指定​

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

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

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

キャッシュの無効化​

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

Terminal
next lint --no-cache

ルールの無効化​

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

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

Core Web Vitalsを使用する​

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

.eslintrc.json
{
  "extends": "next/core-web-vitals"
}

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特有のLintルールも設定に追加します：

.eslintrc.json
{
  "extends": ["next/core-web-vitals", "next/typescript"]
}

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

Prettierと使用する場合​

ESLintもコードフォーマットルールを含んでおり、既存のPrettier設定と競合することがあります。ESLintとPrettierを一緒に機能させるために、eslint-config-prettierをESLint構成に含めることをお勧めします。

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

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を追加します：

.eslintrc.json
{
  "extends": ["next", "prettier"]
}

ステージングされたファイルに対してLintを実行する​

lint-stagedと一緒にnext lintを使用してステージングされたGitファイルに対してリンターを実行したい場合、--fileフラグの使用を指定するために、プロジェクトのrootにある.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: {
    // 警告: ESLintエラーがあってもプロダクションビルドが成功裏に完了できるようになります
    ignoreDuringBuilds: true,
  },
}

export default nextConfig

既存の設定の移行​

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

以下の条件がすべて該当する場合：

  • 次のプラグインの1つ以上がすでにインストールされている（個別またはairbnbやreact-appなど異なる設定を通じて）：
    • react
    • react-hooks
    • jsx-a11y
    • import
  • 次のparserOptionsが定義されているが、BabelがNext.jsで設定されている方法とは異なるもの（カスタマイズしたBabel設定がない限り推奨されません）
  • eslint-plugin-importがimportを処理するためにNode.jsおよび/またはTypeScript resolversも含めてインストールされている

それならば次のいずれかを行うことをお勧めします：

  • これらのプロパティが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を含める場合、他の設定の後に最後に拡張されるように確認してください。例えば：

.eslintrc.json
{
  "extends": ["eslint:recommended", "next"]
}

next設定はすでにparser、plugins、settingsプロパティのデフォルト値を設定しています。別の設定が必要でない限り、これらのプロパティを手動で再宣言する必要はありません。

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