fix: ESLint 9 compatibility with direct plugin config

Replace FlatCompat-based eslint-config-next with direct plugin
imports to fix "Unexpected top-level property name" error.
This avoids the incompatibility between eslint-config-next and
ESLint 9's flat config format.

- Use @next/eslint-plugin-next directly
- Use eslint-plugin-react directly
- Use only classic react-hooks rules (not React Compiler rules)
- Add typescript-eslint for TypeScript support
- Update eslint-config-next to 15.4.10

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

eslint.config.mjs

@@ -1,20 +1,55 @@
 import { dirname } from "path";
 import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import nextPlugin from "@next/eslint-plugin-next";
+import reactPlugin from "eslint-plugin-react";
+import hooksPlugin from "eslint-plugin-react-hooks";
+import tseslint from "typescript-eslint";
 
 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"),
   {
+    plugins: {
+      "@next/next": nextPlugin,
+    },
     rules: {
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs["core-web-vitals"].rules,
       "@next/next/no-page-custom-font": "off",
       "@next/next/no-img-element": "off",
+    },
+  },
+  {
+    plugins: {
+      react: reactPlugin,
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "react/no-unknown-property": "off",
+      "react/jsx-no-target-blank": "off",
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
+  {
+    plugins: {
+      "react-hooks": hooksPlugin,
+    },
+    rules: {
+      // Only use classic react-hooks rules (not React Compiler rules)
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+    },
+  },
+  ...tseslint.configs.recommended,
+  {
+    rules: {
       "@typescript-eslint/no-empty-object-type": "off",
       "@typescript-eslint/no-unused-vars": [
         "error",
@@ -30,6 +65,9 @@ const eslintConfig = [
       ],
     },
   },
+  {
+    ignores: [".next/**", "node_modules/**"],
+  },
 ];
 
 export default eslintConfig;

package.json

@@ -126,7 +126,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "drizzle-kit": "^0.31.0",
     "eslint": "^9",
-    "eslint-config-next": "15.3.0",
+    "eslint-config-next": "15.4.10",
     "husky": "^9.1.7",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
@@ -134,6 +134,7 @@
     "tailwindcss": "^4",
     "tsx": "^4.19.3",
     "tw-animate-css": "^1.2.5",
-    "typescript": "^5"
+    "typescript": "^5",
+    "typescript-eslint": "^8.54.0"
   }
 }