⚠️

[2024年]Next.js(v15) + ESLint(v9 FlatConfig )周りの設定

2024/10/28に公開

昨年2023年バージョンのNext.jsのESLintの記事を書いたのですが、
色々更新されているため新しく記事を書きました。

現在Next.js(v15.0.1)をインストールするとeslintはまだ8系ですが、
これを9系にバージョンアップしたものになります。
今回は記事で詳細は解説せずPRを作成して、そこにコメントを書きました。
過去ほど丁寧には書いてませんが、参考になれば。

何はともあれ、まずはESLintの公式ドキュメントを読むことをお勧めします。
https://eslint.org/docs/latest/use/configure/configuration-files

今回作ったリポジトリ

https://github.com/underground0930/nextjs-eslint-2024

参考PR(ここに詳細を解説してます)

https://github.com/underground0930/nextjs-eslint-2024/pull/1/files

参考にさせていただいたページ(感謝)

https://zenn.dev/ikemo/scraps/ad6a3dcdf90055
https://qiita.com/masakinihirota/items/b61d595e4ea746adef57
https://zenn.dev/cybozu_frontend/articles/about-eslint-flat-config
https://zenn.dev/kazukix/articles/eslint-config-2024-09
https://zenn.dev/hsato_workman/articles/0f10b04a25963c
https://github.com/vercel/next.js/discussions/49337#discussioncomment-6009130
https://dev.classmethod.jp/articles/husky-changed-v8-to-v9-migration/

【過去記事】 2023年バージョンのリポジトリと記事

https://github.com/underground0930/nextjs-eslint-2023
https://zenn.dev/resistance_gowy/articles/91b4f62b9f48ec

【補足】 ESLintの設定を確認出来る「ESLint Config Inspector」

ESLintの設定の内容を確認出来る
「ESLint Config Inspector」がとても便利でした。

https://qiita.com/KokiSakano/items/55fc416cbaa6edb2bf20

npx eslint --inspect-confighttp://localhost:7777/
を見る事で確認出来ます。
プロジェクトの設定が可視化出来て、おすすめです!

npm run buildで1つだけ出るwarningが解決出来ない。。

機能的には問題ないのですが、
1つずつ自力でセットアップしているからしょうがないのか。
Next.jsのバージョンアップすれば解決するのか。
ご存知の方いたら教えてください🙇

The Next.js plugin was not detected in your ESLint configuration.
See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config

Discussion