Refactor ESLint configuration for Next.js 16

eslint.config.mjs

@@ -1,30 +1,43 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import nextPlugin from "@next/eslint-plugin-next";
 import remotion from "@remotion/eslint-plugin";
+import tseslint from "typescript-eslint";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+// Build Next.js recommended rules and an "off" map for overrides
+const nextRecommended = nextPlugin.configs.recommended ?? { rules: {} };
+const nextRecommendedRules = nextRecommended.rules ?? {};
+const offNextRules = Object.fromEntries(Object.keys(nextRecommendedRules).map((k) => [k, "off"]));
 
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
-
-const [nextPlugin] = compat.extends("plugin:@next/next/recommended");
-
-const eslintConfig = [
-  ...compat.extends("next/typescript"),
-  nextPlugin,
+export default [
+  // Global ignores
+  {
+    ignores: ["node_modules/**", ".next/**", "out/**", "build/**", "next-env.d.ts"],
+  },
+  // Base JS recommended
+  js.configs.recommended,
+  // TypeScript recommended (non type-checked for speed/simplicity)
+  ...tseslint.configs.recommended,
+  // Next.js recommended rules applied to app code
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    plugins: { "@next/next": nextPlugin },
+    rules: {
+      ...nextRecommendedRules,
+    },
+  },
+  // Remotion rules applied only to remotion files
   {
+    files: ["src/remotion/**"],
     ...remotion.flatPlugin,
     rules: {
       ...remotion.flatPlugin.rules,
-      ...Object.entries(nextPlugin.rules).reduce((acc, [key]) => {
-        return { ...acc, [key]: "off" };
-      }, {}),
     },
+  },
+  // Disable all Next.js rules within remotion files
+  {
     files: ["src/remotion/**"],
+    rules: {
+      ...offNextRules,
+    },
   },
 ];
-
-export default eslintConfig;