Accessing searchParams in Deeply Nested Server Components within the Same Route Segment

[hamzamongam]

Background

In the Next.js App Router, searchParams are automatically passed to page.tsx and layout.tsx of a given route segment. However, deeply nested server components inside the same segment do not receive searchParams directly. This requires developers to manually pass them down through props, which can become cumbersome in larger applications.

For example:

Current Workaround

Currently, to access searchParams in a deeply nested server component, we must explicitly pass them down:

app/dashboard/page.tsx

export default function DashboardPage({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) {
  return <NestedComponent searchParams={searchParams} />;
}

app/dashboard/components/NestedComponent.tsx

export default function NestedComponent({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) {
  const filter = searchParams.filter || "default";
  return <div>Current Filter: {filter}</div>;
}

While this works, it introduces unnecessary prop-drilling, especially in applications with multiple levels of nesting.

##Proposal

It would be helpful if Next.js provided a way for deeply nested server components to access searchParams directly, similar to how useSearchParams() is available for client components.

A potential API enhancement could be:

A new hook like useServerSearchParams() that works within server components.
Making searchParams available in all server components within the same route segment without explicit prop-drilling.