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

[aman-godara]

@devjiwonchoi I couldn't completely understand why searchParams are not accessible in layout.js. With next.js 15, page segments caching is by default disabled in client router cache, which makes RSC payload for page.js to be fetched everytime searchParams are changed on the client side, can't next.js in the future do something like this for layout.js file too? i.e to fetch new RSC payload for layout.js everytime searchParams change?

Or if I guess it right then there can be too many layout.js files in that scenario to re-run & generate that new RSC payload, hence next.js went with refetching just the only 1 page.js RSC payload?

[kevin-daniel-hunt]

Yeah after dealing with this for a while, its a little insane that layout server components cannot receive search params. I have a system where initial pageload occurs in the layout because it dynamically wraps children content, this works great if I store the search params into headers and access that in the layout but its obviously anti-pattern. Even if there was a caveat of "Searchparams accessed are only good for intitial page fetches and not if they are updated) I would still think that would be acceptable in many circumstances.

[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

[daisyklar]

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.

[aman-godara]

yes by using headers() you make it dynamic rendering.

[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.

[jerrickhakim]

Found my self here, Build an App builder and hacking Next.js here's my workaround. Seems scaleable & simple with no side effects.

Much ❤️ yall & happy coding.

Wishing success upon all devs.
middleware.ts

import { NextResponse } from "next/server";

export async function middleware(request) {
  const response = NextResponse.next();
  const searchParams = request.nextUrl.searchParams.toString();
  response.headers.set("searchParams", searchParams);
  return response;
}

export const config = {
  matcher: "/((?!api|_next/static|_next/image|favicon.ico).*)",
};

layout.tsx

import React from "react";
import { headers } from "next/headers";

export default async function Layout({ children }) {
  const headerStore = await headers();
  const searchParams = Object.fromEntries(
    new URLSearchParams(headerStore.get("searchParams") || "")
  );

  return (
    <html lang="en">
      <head>
        {/* Add necessary meta tags, scripts, and styles */}
      </head>
      <body>
        {/* Render searchParams */}
        <pre>{JSON.stringify(searchParams, null, 2)}</pre>
        {children}
      </body>
    </html>
  );
}

[mycolaos]

• The catch is that middleware makes the pages dynamic. Not ok if you want them statically built.

[ferka123]

If you only need to access search params once on first render of the layout you could use this hack:

React.isValidElement(children) &&
   console.log(children.props.childProp.segment);

prints this:

 __PAGE__?{"hello":"world"}

Probably a bad way to do this but I use it to redirect to default sub tab if no sub tab specified:

React.isValidElement(children) &&
  children.props.childProp.segment === "__PAGE__" &&
  redirect("?credit=" + defaultCredit);

[parthtiwar-i]

So is there any way we can get the searchParams in root layout.js?
or using middleware is the only way! :(

[dbtek]

If you need searchParams inside a layout, a simple workaround is to use a parallel route. Parallel routes get searchParams, and since they’re rendered as a ReactNode inside your layout, you can surface the params there without turning the layout into a client component.

Example:

app/
  layout.tsx
  @params/page.tsx
  page.tsx

app/layout.tsx

export default function RootLayout({ children, params }) {
  return (
    <html>
      <body>
        <header>{params}</header>
        {children}
      </body>
    </html>
  );
}

app/@params/page.tsx

export default function ParamsSlot({ searchParams }) {
  return <span>{JSON.stringify(searchParams)}</span>;
}