#Why do layouts not accept searchParams?

1 messages · Page 1 of 1 (latest)

hasty igloo
#

I want to access URL search params in a layout, but I can't. Only in a page. Why?

little doveBOT
#

Hi @hasty igloo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Layout components in Next.js do not receive the searchParams prop because a shared layout is not re-rendered during navigation, which could lead to stale searchParams between navigations. This is a performance optimization that allows quicker navigation between pages that share a layout, as only the data fetching and rendering for the page has to run, instead of the entire route that could include shared layouts that fetch their own data (source (https://beta.nextjs.org/docs/api-reference/file-conventions/layout#good-to-know)).

To access search params, you should use the Page searchParams prop or the useSearchParams hook in a Client Component, which is re-rendered on the client with the latest searchParams (source (https://beta.nextjs.org/docs/api-reference/use-search-params)).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

File Conventions: layout.js

API reference for the layout.js file.