【Next.js】next/core-web-vitals についての理解
Next.js のプロジェクトを立ち上げた時にさりげなく入ってくるESLintの設定。こいつはなんぞや？と思いつつ薄い理解で進めてしまっていたので理解を兼ねてまとめました。
Next.js のプロジェクトを立ち上げてみる
初期構築のコマンドを叩いてみましょう。
$ npx create-next-app@latest sample --typescript --eslint
ESLintのオプションを設定したことで、自動的に .eslintrc.json が作成されています。発見・・！！
{
"extends": ["next/core-web-vitals", "next/typescript"]
}
Next.js におけるESLintの設定
Next.js の基本 ESLint 構成は3のオプションから設定することができる。
- Strict（recommended）
- Next.js の基本 ESLint 構成とより厳格なルールセットを含む構成
- Base
- Next.js の基本 ESLint 構成
- Cancel
- ESLint 構成なし
ただし、CreateNextApp を使って構築する場合は自動的に next/core-web-vitals が含まれる。
一体、何者なのか
ESLint 構成をとるそれぞれのオプション選択時に設定ファイルに追加される設定。
Strict
{
"extends": ["next/core-web-vitals", "next/typescript"]
}
Base
{
"extends": "next"
}
デフォルトの構成である Base では eslint-config-next の設定が適用される。推奨ルールセットがすべて含まれているお得パック。
-
eslint-plugin-react
- React 固有のルール
-
eslint-plugin-react-hooks
- Hooks のルール（React.js に内含されている）
-
eslint-plugin-next
- Next.js アプリにおけるルール（Next.js に内含されている）
next/core-web-vitals updates eslint-plugin-next to error on a number of rules that are warnings by default if they affect Core Web Vitals.
さらに Strict では Base に加えより厳密となっている。
コードを見てみる
概要は把握できたと思うので、実際のコードを見てみる。
Baseの時の eslint-config-next の中身はこんな感じ。
Strict時の中身はこんなかんじ。
Base に加えて eslint-plugin-next の core-web-vitals が設定されています。
ちなみに、 自動で追加されていた next/typescript はこちらで設定されていました。
最後に
さりげなくやりすごしていた初期設定でしたが、詳細を見ているとすでに導入されている設定が多々。混乱を避けるためにも、しっかりと把握し、重複は避けたいですね。
Discussion