Hi everyone! 👋

I'm new to Next.js (currently using v15) and learning the ropes. I'm struggling with fetching searchParams on the server side in a dynamic route using a catch-all segment structure.

Here's my folder structure:

└── app
    └── category
        └── [[...slug]]
            └── page.tsx

Code:

interface CategoryViewProps {
  params: { page?: string; slug: string[] };
  searchParams?: SearchParamsType;
}

export default async function CategoryPage({
  params,
  searchParams = {},
}: CategoryPageProps) {

  console.log("Category page params:", params);
  console.log("Category page search param:", searchParams);

  return <CategoryView params={params} />;
}

When I visit the following URL:

http://localhost:3000/category/health-and-beauty/hair-care?brand=ors

Console output:

Category page params: slug: [ 'health-and-beauty', 'hair-care' ]
Category page search param: {}

'm confused because searchParams is always empty ({}), even though the URL includes a query string (?brand=ors). I've gone through the Next.js documentation but still can't figure out what I'm missing. 😵‍💫

Can anyone point me in the right direction? Your help would mean a lot! 🙏