RootLayout doesn't receive searchParams as props

[mpereira]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64
    Binaries:
      Node: 16.15.0
      npm: 8.5.5
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 13.0.6
      eslint-config-next: 13.0.4
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://stackblitz.com/edit/vercel-next-js-z5qkbs?file=app%2Flayout.js

To Reproduce

1. Open https://stackblitz.com/edit/vercel-next-js-z5qkbs?file=app/layout.js

2. Open https://vercelnextjsz5qkbs-4a2j--3000.local-credentialless.webcontainer.io/?foo=true

3. Check terminal output in https://stackblitz.com/edit/vercel-next-js-z5qkbs?file=app/layout.js (from console.log(props) in RootLayout

   {
     children: {
       '$$typeof': Symbol(react.element),
       type: {
         '$$typeof': Symbol(react.module.reference),
         filepath: '/home/projects/vercel-next-js-z5qkbs/node_modules/next/dist/client/components/layout-router.js',
         name: '',
         async: false
       },
       key: null,
       ref: null,
       props: {
         parallelRouterKey: 'children',
         segmentPath: [Array],
         error: undefined,
         errorStyles: undefined,
         loading: undefined,
         loadingStyles: undefined,
         hasLoading: false,
         template: [Object],
         templateStyles: undefined,
         notFound: [Object],
         notFoundStyles: undefined,
         childProp: [Object],
         rootLayoutIncluded: true
       },
       _owner: null,
       _store: {}
     },
     params: {}
   }

4. props in RootLayout doesn't include searchParams, even though layouts should be considered server components.

Describe the Bug

props in RootLayout doesn't include searchParams, even though layouts should be considered server components.

Expected Behavior

props in RootLayout shoud include searchParams.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[filipesmedeiros]

I think only pages receive searchParams. Don't know if that is by design or not

[Fredkiss3]

@filipesmedeiros I think that’s by design since layouts are supposed not to rerender on page transitions.

and in the generated types for next layouts, I have these types here :

type PageParams = Record<string, string>
interface PageProps {
  params: any
  searchParams?: any
}
interface LayoutProps {
  children: React.ReactNode
  params: any
}

It seems like Layouts cannot receive searchParams.

PS: I got these types after running next build and going to .next/types/app/layout.ts

[mpereira]

For context, my use case is conditionally rendering some parts of the layout depending on URL search params.

[Fredkiss3]

Can you use a client component to conditionnaly render the components ?

because in client components wherever you are in the tree, you can call useSearchParams to get the URL search params.

And since you can pass server components as children (or props) to client components, you can even pre-render the parts you need on the layout and pass them as props to a client component with useSearchParams in it.

[mpereira]

Thanks for the suggestion, @Fredkiss3. That would work.

[karlhorky]

Also suggested this change to client component + useSearchParams in the next-pokedex example from @chantastic's react.holiday series last year, where @chantastic also ran into problems expecting searchParams to be passed to the layout:

• Switch Sidebar to Client Component + useSearchParams? chantastic/next-pokedex#1

[karlhorky]

@mpereira to be clear, this affects all layouts, correct? Not only RootLayouts, but also nested layouts?

If so, maybe it makes sense to update the title + description + demo of the issue?

It's nice to have a tracking issue for this, since I remember seeing somewhere "the Next.js team is considering adding additional information to Layout props" - can't find the resource right now though...

[karlhorky]

Or wait, I just found this issue as well, sounds similar:

• [Next 13] Server Component + Layout.tsx - Can't access the URL / Pathname #43704

@balazsorban44 would you suggest marking #43863 as a duplicate of #43704?

[mpereira]

@karlhorky marking this one as a duplicate sounds good to me.

[karlhorky]

Ok, I asked @adileo if he would edit the issue to mention the additional details explicitly and create a demo, potentially using yours as a starting point: #43704 (comment)

[balazsorban44]

Thanks for the ping and sorry for the late reply, I think we can fold this discussion into #43704 as suggested above. 👍

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.