I am experiencing an issue with the dynamic route page structure in Next.js's App Router. Specifically, when I print the props data params and searchParams in my local environment, everything works fine. However, when I deploy to Vercel and test it, the value of params is correct, but searchParams outputs as undefined.

I'm curious about why there is a difference between the local environment and the deployed environment. Additionally, I'm wondering if this issue occurs only when deploying to Vercel.

Currently, I have resolved this issue using the useSearchParams hook.

Example structure: app/test/[id]/[post]/page.tsx

Example URL: /test/13/post?id=555

interface Props {
  params: Promise<{ post: string }>;
  searchParams: Promise<{ id: string }>;
}

const Page = async ({ params, searchParams }: Props) => {
  const { post } = await params;
  const { id } = await searchParams;

  return (
    <div>
      <div>Params: {post === undefined ? "undefined" : post}</div> // local = "post", production = "post"
      <div>QueryString: {id === undefined ? "undefined" : id}</div> // local = "555", production = undefined
    </div>
  );
};

export default Page;

I tested the dynamic route in Next.js using both local and Vercel environments. I expected searchParams to return the correct query string value (e.g., id=555) in both environments. Instead, in my local setup, it worked as intended, but when deployed to Vercel, searchParams returned undefined, even though params was correct.