Next.jsのESLint設定"next/typescript"は何をしているのか？実は2つのルールを変えただけだった

概要

Next.jsプロジェクトを始めるとき、初期設定のeslint.config.mjsをそのまま使う人も多いと思います。
そこに書かれているnext/typescriptが実際何をしているかご存知でしょうか？

create-next-appをした時点でのeslint.config.mjsは次のようになっています。

eslint.config.mjs

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
];

export default eslintConfig;

公式ドキュメントを見ると次のように記載されています。

Those rules are based on plugin:@typescript-eslint/recommended. See typescript-eslint > Configs
for more details.

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

@typescript-eslint/recommendedに基づいているのは分かりましたが、完全に引き継いでいるのか、何か差分があるのか、あるいは別途追加されたルールがあるのかは分かりません。

というわけでソースコードを追って調べ、備忘録がてら記事にしました。

対象読者

• ESLintのルールを設定する立場にある人
• 巷の技術記事に書いてある設定ファイルをコピー＆ペーストするだけなのは嫌な人

結論

• @typescript-eslint/recommendedとほとんど一緒
• @typescript-eslint/no-unused-varsと@typescript-eslint/no-unused-expressionsがerrorからwarnに変わっただけ

環境

依存関係	バージョン
next	15.4.6
eslint-config-next	15.4.6
@typescript-eslint/eslint-plugin	8.40.0

記事内に載せているソースコードは上記のバージョンのもので、将来は変更される可能性があります。

next/typescriptの内容

eslint.config.mjsではnext/typescriptと記載されていますが、実際に使われているのはeslint-config-nextというパッケージで、その中のtypescrit.jsというファイルの中でルールが定義されています。

ここで、@typescript-eslint/recommendedの定義を見てみます。

違いをまとめると次のようになります。¹

	@typescript-eslint/recommended	eslint-config-next
@typescript-eslint/no-unused-vars	error	warn
@typescript-eslint/no-unused-expressions	error	warn

自分としては、これだけ小さな変更なら、個別にnext/typescriptを作る必要も無かったのでは……と思ってしまいましたが、無事に疑問が晴れて良かったです。

改めて結論

• @typescript-eslint/recommendedとほとんど一緒
• @typescript-eslint/no-unused-varsと@typescript-eslint/no-unused-expressionsがerrorからwarnに変わっただけ

1. 'off', 'warn', 'error'は0, 1, 2と対応しており、どちらで書いても良いです。表では理解のしやすさのために、記載方法を揃えました。 ↩