404 for NEXT JS dynamic routes on Vercel production deployment

I am stuck on a frustrating behavior on my next js app which I recently deployed to vercel production environment. Basically all pages are loading except my SSR page that uses dynamic routes. Also note that the same app works fine on npm run dev on my machine. Not sure if this is a vercel issue but anyhow hope to find a solution

Here is the exact information for you:

• Next JS version 15.0.4
• Route with issue ../src/app/battles/[id]/page.tsx
• Route URL in production vercel https://.vercel.app/battles/
• Exact Component Code (At bottom of this post)
• battles folder in app folder below

battles folder in app folder

google dev tools

import React from "react";
import { notFound } from "next/navigation"; // For 404 handling
import HeroSection from "./heroSection";
import AiAnalysis from "./aiAnalysis";
import UsersDiscussion from "./usersDiscussion";
import { getBaseUrl } from "@/src/lib/utils/getBaseUrl";

interface PageProps {
  params: Promise<{ id: string }>;
}

export const dynamicParams = true

async function getBattleByName(name: string) {
    const baseUrl = getBaseUrl();
    const res = await fetch(`${baseUrl}/api/battles/${name}`, {
        cache: 'no-store',
    });
    if (!res.ok) {
        return null;
    }
    const data = await res.json();
    return data.results && data.results.length > 0 ? data.results[0] : null;
}

export async function generateStaticParams() {
  const baseUrl = getBaseUrl();
  try {
    const res = await fetch(`${baseUrl}/api/battles`, { cache: "no-store" });
    if (!res.ok) return [];

    const data = await res.json();
    return data.results.map((battle: any) => ({
      id: battle.name,
    }));
  } catch {
    return [];
  }
}

export async function generateMetadata({ params }: PageProps) {
  const { id } = await params;
  const battle = await getBattleByName(id);

  if (!battle) return { title: "Battle not found" };
  return { title: `${battle.name} | What-If Battles` };
}

async function BattleDetail({ params }: PageProps) {
    let resolvedParams = await params;
    // const id = decodeURIComponent(resolvedParams.id);
    // if (!id) {
    //  notFound();
    // }
    // const battle = await getBattleByName(id);
    const { id } = await params; // ✅ don't decode
    const battle = await getBattleByName(id);
    if (!battle) {
        notFound();
    }
    return (
        <div>
            <HeroSection title={battle.name} teamA={battle.team_a} teamB={battle.team_b}></HeroSection>
            <AiAnalysis analysisHTML={battle.ai_analysis}></AiAnalysis>
            <UsersDiscussion battleId={battle.id}></UsersDiscussion>
        </div>
    );
}

export default BattleDetail;

What I have tried or explored so far: Vercel.json has some settings that may cause the issue. I dont have this json file in my project. Use generateStaticParams() to create these pages at build time. You can see in my code I added this function but it did not solve the problem. Downgrade nextjs version. I was initially on the latest version and downgraded to 15.0.4 On vercel make sure that Framwork preset is NextJS in Framework Settings Make sure you do not have two api folders in your project file tree. I do not have that.

Please let me know any more information that you need to figure this problem out