Im having issues right now trying to get my production site to retrieve params from my dynamic route, which works locally, but ive been having issues trying to get it to work on vercel.. Please look at my code, i can answer questions, just super confused what ive messed up , ive been trying to figure out what the problem is.


app/profile/[userID]/page.jsx:

'use server'
import { fetchUser } from '../../lib/fetchUser'
import { fetchUserPosts } from '@/app/lib/fetchPosts'
import ProfileHeader from '../../components/ProfileHeader'
import ProfileContent from '../../components/ProfileContent'
import { auth } from '@clerk/nextjs/server'
import Link from 'next/link'


export default async function page({ params }) {
    console.log("Params:", params);

    const { userID } = params;
    const { userId } = await auth();
    console.log("UserID:", userID);
    console.log("Clerk userId:", userId);

    const [user, posts] = await Promise.all([
        fetchUser({ userId: userID }),
        fetchUserPosts({ userId: userID }),
    ]);

    return (
        <div className='bg-[#200c22] text-white pt-12'>
            <div className='border-b-[#a086b2] border-b-2'>
                <ProfileHeader user={user} clerkUserId={userId} />
            </div>
            {posts.length === 0 ? (
                <div className='flex flex-col justify-center gap-4 align-middle items-center h-full min-h-72 text-lg'>
                    <p className=''>No posts yet!</p>
                    <Link className='p-2 bg-purple-500 rounded-lg' href={'/create-post'}>Create Post</Link>
                </div>
            ) : (
                <ProfileContent posts={posts} />
            )}
        </div>
    );
}

im routing to these using Link, with this as the href for each one , <Link href={/profile/${iD}} className='font-semibold text-white hover:text-[#a086b2] text-1xl'>{userName}</Link>