Accessing the searchParams from the layout without making it 'use client'

[JLex11]

I am trying to create an autocomplete component similar to algolia autocomplete but using all the power of react server components, in the way of creating it I base on the searchParams that you can get from a page.tsx so that from my 'use client' input I changed the searchParams with router.push and rendered the items on the server, everything was fine up to there.

The problem came when I wanted to render this Autocomplete component in my root layout to have it in all my pages, since I can't access the searchParams from my layout without doing this 'use client' which in a way ruined my plans since to use my Autocomplete component would have to be added in each of my page.tsx which is not very good.

If you know of a solution to this problem, I would greatly appreciate it.

[devjiwonchoi]

[Jbmanllr]

I'm a little perplex by the answers around next js app router it makes the whole thing even more confusing, the OP asked how to get search params in the layout without making it a client component (hence using useSearchParams), and the answer say that you get searchparams in the page. But it wasn't what was asked. he was asking about the Layout.

[devjiwonchoi]

You're right.. my answer was out of the track. I guess there's no neat way for this one.

https://nextjs.org/docs/app/api-reference/file-conventions/layout#layouts-do-not-receive-searchparams

[tongene]

Go to your nextjs middleware and try something like this:

response.headers.set('your value', request.nextUrl.searchParams ||'no value')

Then in the component or layout try getting that value you set like this

const searchParams = (await headers()).get('yourvalue')||

[exelimpichment]

ty mate
looks solid and even works

[sparkssteve]

Go to your nextjs middleware and try something like this:

response.headers.set('your value', request.nextUrl.searchParams ||'no value')

Then in the component or layout try getting that value you set like this

const searchParams = (await headers()).get('yourvalue')||

I think you set your all pages to dynamic(edge) rendering by doing this. Please correct me if I'm wrong.

[mycolaos]

Since template.js files are re-rendered for each page instance, wouldn't it be possible to access searchParams there?

[JacobWennebro]

You would think so, but it's not passed. It is beyond me why we cannot have query params dictate our layouts or templates. In my use case I really don't want to have to check for my 'embedded mode' query params in each and every page.

[mycolaos]

That's why I'm asking.