📐

【Next.js 16】next lint 廃止により起きる lint 失敗と ESLint CLI 移行手順

に公開
Next.js
ESLint
tech

はじめに

私は、Next.js 16 へアップデートした後、ESLint の設定を変えてもいない中で、pnpm lint が落ちるようになりました。
本記事では、今回の原因であるNext.js 16 における方針変更と具体的な移行手順をご紹介します。

対象者

  • Next.js を 16 にアップデートした方
  • pnpm lint が突然失敗するようになった方
  • next lint を前提に ESLint を運用してきた方

結論

next lint に依存していた構成が、Next.js 16 の方針変更と噛み合わなくなりました。
Next.js 16 では lint 実行は ESLint CLI に移行しましょう。

何が起きたのか

Next.js 16 では、これまで使えていた next lint が削除されました。
その結果、以下のような状態が発生します。

  • package.json の lint スクリプトは残っている
  • 内部で呼ばれていた next lint は存在しなくなった

これにより、npm lint を実行するとエラーが出て、一見すると「lint 自体が壊れた」ように見えてしまいます。エラーメッセージが next lint の削除を直接示さないため、問題の本質に気づくまで時間がかかりがちです。

最小構成での移行手順

まずは以下の最小構成で問題なく動く状態を作ります。

  1. package.json の lint スクリプトを変更する
  2. next.config に記述していた eslint 設定を削除する
  3. eslint.config.mjs を用意する

1. package.json の lint スクリプトを変更する

修正対象ファイル

package.json

変更例

package.json
{
  "scripts": {
-    "lint": "next lint"
+    "lint": "eslint ."
  }
}

補足

  • pnpm lint / npm run lint / yarn lint のどれでも同じ挙動
  • next lint は Next.js 16 では存在しないため、ここが壊れる起点になっていた

2. next.config に記述していた eslint 設定を削除する

修正対象ファイル

next.config.js
or
next.config.mjs

設定例

next.config.js or next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
- eslint: {
-   dirs: ["src", "app", "pages"]
- }
};

export default nextConfig;

補足

  • Next.js 16 では eslint オプション自体が不要
  • lint 実行は Next.js ではなく ESLint CLI の責務になる

3. eslint.config.mjs を用意する

作成するファイル

eslint.config.mjs

構成例

eslint.config.mjs
import js from "@eslint/js";
import tseslint from "typescript-eslint";
import next from "@next/eslint-plugin-next";

export default [
  {
    ignores: [
      ".next/**",
      "node_modules/**",
      "out/**",
      "build/**",
      "dist/**",
      "public/**"
    ]
  },

  js.configs.recommended,
  ...tseslint.configs.recommended,

  {
    files: ["**/*.{js,jsx,ts,tsx}"],
    plugins: {
      "@next/next": next
    },
    rules: {
      ...next.configs.recommended.rules,
      ...next.configs["core-web-vitals"].rules
    }
  }
];

必要な依存関係

もし未インストールなら以下を追加します。

pnpm add -D eslint @eslint/js typescript-eslint @next/eslint-plugin-next

動作確認

ここで pnpm lint してみて動作確認してみましょう。
以下の状態になっていれば成功です。

  • ESLint が実行される
  • next lint に関するエラーが出ない
  • Next.js 用ルールが効いている

おわりに

アップデート直後にエラーが出ると不安になりやすいと思いますが、今回の件も、実際には Next.js の方針変更を理解すれば納得できる内容でした。この記事が、同じく混乱した方にとって参考になれば幸いです。

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】
ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
https://onewedge.co.jp/

GitHubで編集を提案

Discussion