Updated to latest Next.js and ESlint version

.eslintrc.json

@@ -1,16 +0,0 @@
-{
-  "extends": ["next/core-web-vitals", "prettier"],
-  "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler"],
-  "parser": "@typescript-eslint/parser",
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx"],
-      "parserOptions": {
-        "project": "./tsconfig.json"
-      }
-    }
-  ],
-  "rules": {
-    "react-compiler/react-compiler": "warn"
-  }
-}

app/(marketing)/page.tsx

@@ -5,7 +5,6 @@ import Link from 'next/link';
 
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
-import Image from 'next/image';
 
 const headingFont = localFont({ src: '../../public/fonts/font.woff2' });
 

app/(platform)/(dashboard)/board/[boardId]/layout.tsx

@@ -4,11 +4,10 @@ import { notFound, redirect } from 'next/navigation';
 import { db } from '@/lib/db';
 import { BoardNavbar } from './_components/board-navbar';
 
-export async function generateMetadata({
+export async function generateMetadata(props: {
-  params,
+  params: Promise<{ boardId: string }>;
-}: {
-  params: { boardId: string };
 }) {
+  const params = await props.params;
   const { orgId } = auth();
 
   if (!orgId) return { title: 'Board' };
@@ -25,13 +24,14 @@ export async function generateMetadata({
   };
 }
 
-const BoardIdLayout = async ({
+const BoardIdLayout = async (props: {
-  children,
-  params,
-}: {
   children: React.ReactNode;
-  params: { boardId: string };
+  params: Promise<{ boardId: string }>;
 }) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const { orgId } = auth();
 
   if (!orgId) redirect('/select-org');

app/(platform)/(dashboard)/board/[boardId]/page.tsx

@@ -5,12 +5,13 @@ import { db } from '@/lib/db';
 import { ListContainer } from './_components/list-container';
 
 interface BoardIdPageProps {
-  params: {
+  params: Promise<{
     boardId: string;
-  };
+  }>;
 }
 
-const BoardIdPage = async ({ params }: BoardIdPageProps) => {
+const BoardIdPage = async (props: BoardIdPageProps) => {
+  const params = await props.params;
   const { orgId } = auth();
 
   if (!orgId) {

app/api/cards/[cardId]/logs/route.ts

@@ -6,8 +6,9 @@ import { db } from '@/lib/db';
 
 export async function GET(
   req: Request,
-  { params }: { params: { cardId: string } }
+  props: { params: Promise<{ cardId: string }> }
 ) {
+  const params = await props.params;
   try {
     const { orgId, userId } = auth();
 

app/api/cards/[cardId]/route.ts

@@ -5,8 +5,9 @@ import { db } from '@/lib/db';
 
 export async function GET(
   req: Request,
-  { params }: { params: { cardId: string } }
+  props: { params: Promise<{ cardId: string }> }
 ) {
+  const params = await props.params;
   try {
     const { orgId, userId } = auth();
 

app/api/webhook/route.ts

@@ -7,7 +7,7 @@ import { stripe } from '@/lib/stripe';
 
 export async function POST(req: Request) {
   const body = await req.text();
-  const signature = headers().get('Stripe-Signature') as string;
+  const signature = (await headers()).get('Stripe-Signature') as string;
 
   let event: Stripe.Event;
 

eslint.config.mjs

@@ -0,0 +1,41 @@
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import reactCompiler from 'eslint-plugin-react-compiler';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...compat.extends('next/core-web-vitals', 'prettier'),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      'react-compiler': reactCompiler,
+    },
+
+    rules: {
+      '@next/next/no-duplicate-head': 'off', // Turn off this rule for now as it's giving false positives
+    },
+
+    files: ['**/*.ts', '**/*.tsx'],
+
+    languageOptions: {
+      ecmaVersion: 5,
+      sourceType: 'script',
+
+      parser: tsParser,
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+    },
+  },
+];

next.config.ts

@@ -1,5 +1,6 @@
-/** @type {import('next').NextConfig} */
+import type { NextConfig } from 'next';
-const nextConfig = {
+
+const nextConfig: NextConfig = {
   experimental: {
     reactCompiler: true,
   },
@@ -17,4 +18,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "NODE_OPTIONS='--inspect' next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -54,6 +54,8 @@
     "zustand": "^5.0.0"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.12.0",
     "@microsoft/eslint-formatter-sarif": "^3.1.0",
     "@next/eslint-plugin-next": "^14.2.15",
     "@types/dompurify": "^3",
@@ -64,7 +66,7 @@
     "@typescript-eslint/eslint-plugin": "^8.9.0",
     "@typescript-eslint/parser": "^8.9.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.0",
+    "eslint": "^9.12.0",
     "eslint-config-next": "^15.0.0-rc.0",
     "eslint-config-prettier": "^9.1.0",
     "postcss": "^8.4.47",