Next.js Discord

Discord Forum

Nextjs V14 Search Params

Answered
Great black wasp posted this in #help-forum
Open in Discord
Great black waspOP
When I will send a request in server side components, how can I bring the search parameters in the url section or can I only use it in client components?
Answered by B33fb0n3
there is only one way I know how to add these searchparams to the url: redirect the client to the specific (new) url (with searchparams). So even if the searchparams that you want to get are deeply nested in your components you can still redirect the client
View full answer

16 Replies

B33fb0n3
you mean if you are on example.com/hello and the page.js (serverside component) load to then add for example a search params like example.com/hello?search=world
or what do you mean? @Great black wasp
Great black waspOP
yes, but since I use a lot of components, page.tsx may have lost its property
I want to pull search params from my server components which are very deep
export default function Section() {
    return (
        <Suspense fallback={<Loading/>}>
            <SectionServerCompontent />
        </Suspense>
    )
}


SectionServerCompontent, I want to pull search parameters when I send a request in this server component
@B33fb0n3
B33fb0n3
there is only one way I know how to add these searchparams to the url: redirect the client to the specific (new) url (with searchparams). So even if the searchparams that you want to get are deeply nested in your components you can still redirect the client
Answer
Great black waspOP
I don't quite understand, do I have to pass the components through each other, as props
B33fb0n3
no, you don't need to
Great black waspOP
then how do I do it, how do I access the search params in the server component?
@B33fb0n3can you send a example ?
export default function Page({ params, searchParams }) {
  return <h1>My Page</h1>
}
@B33fb0n3 yea, you can get it from the props like this: https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional
Great black waspOP
yes I know this but since I use a lot of components in page.js, it is very difficult to call to the bottom and this will cause code confusion
B33fb0n3
oh yea, that's right. You can create a clientcomponent, to get the full url (or only the searchparams) and redirect via the client
B33fb0n3
@Great black wasp solved?
Great black waspOP
yes thank you !