Describe the feature you'd like to request
Currently, inside server components, while it's possible to get the params in dynamic pages, and subsequently the pathname (params + hardcoding) in all pages, there isn't an easy way to access the information in all server components similar to usePathname in client components.
So sometimes I want to do something like this
// server component, reused in many places
function ProductCard() {
const pathname = "????";
return (
<div>
...
{pathname === "/special-page" && <SpecialButton />}
</div>
)
}
but since I don't have pathname, I have to fallback to client components just to use usePathname. While I'm fine with it so far for my use case, there are definitely cases where we want to use RSC instead (I don't want to send SpecialButton to pages that don't need it, for example).
Describe the solution you'd like
A way to easily access the current pathname and params (and search params as well, maybe?) in any RSC.
There are several APIs I can imagine, but I don't know about their feasibilities:
-
Add a special prop like _next to all server components that contains the actual pathname and params that the server component is rendered in. For TypeScript, we can have a type NextServerComponent
export type NextServerComponent<P = unknown> = P & {
_next: {
pathname: string;
// or segments: string[];
params: ParsedUrlQuery;
}
}
-
Add a getPathname() and getParams() function to "next/navigation" that can be used in server components.
Describe alternatives you've considered
N/A
Describe the feature you'd like to request
Currently, inside server components, while it's possible to get the
paramsin dynamic pages, and subsequently the pathname (params+ hardcoding) in all pages, there isn't an easy way to access the information in all server components similar tousePathnamein client components.So sometimes I want to do something like this
but since I don't have
pathname, I have to fallback to client components just to useusePathname. While I'm fine with it so far for my use case, there are definitely cases where we want to use RSC instead (I don't want to sendSpecialButtonto pages that don't need it, for example).Describe the solution you'd like
A way to easily access the current pathname and params (and search params as well, maybe?) in any RSC.
There are several APIs I can imagine, but I don't know about their feasibilities:
Add a special prop like
_nextto all server components that contains the actualpathnameandparamsthat the server component is rendered in. For TypeScript, we can have a typeNextServerComponentAdd a
getPathname()andgetParams()function to"next/navigation"that can be used in server components.Describe alternatives you've considered
N/A