Use createSearchParamsCache to share the page params (not just searchParams)

[tordans]

I followed the docs to access the searchParams (Docs) in my server component. However, I also need access to the params of the given page (Docs). But my component is rendered from the layout, so I cannot just pass in params.

Is there a way to use createSearchParamsCache to share the page params the same way as searchParams?

[franky47]

Due to the way Next.js renders a layout tree, and passes the params and searchParams only to the leaves (page.tsx files), I don't think this would work.

The only case where this might work (no guarantees) is if:

1. The layout in question is located under the dynamic segment (eg: ./app/foo/[id]/layout.tsx)
2. The layout adds components after the {children} hole

For point 1, layouts outside of a dynamic segment would be statically built once, and so would not be rendered per-page. For point 2, it's possible that React would render the components that need to consume the cache before the page is rendered and had a chance to populate it (not entirely sure about this one).

[tordans]

Thanks @franky47! To make sure I get this right, all this applies to params and searchParams in the same way, right? So in general, the createSearchParamsCache "workaround" will only work for server components that are added to page (server components) and not when added to a layout directly.

[franky47]

There is a difference when it comes to layouts.

Layouts don't have access to searchParams, but they do have access to params. So you could (ab)use the cache technique to provide params to nested children of a layout, it should work the same.

Note: apart from the non-nullable aspect: we need to provide a default value for the parsers just to make TypeScript aligned with the fact that params are required (we want non-null values), but search params aren't (so those can be nullable).

// ./app/foo/[id]/layout.tsx
import { createSearchParamsCache, parseAsInteger } from 'nuqs/server'

const paramsCache = createSearchParamsCache({
  // Hack: we need to give it a default for the type to be non-null,
  // even though we know the `id` param is required
  id: parseAsInteger.withDefault(NaN)
})

type LayoutProps = {
  children: React.ReactNode
  params: {
    id: string
  }
}

export default function Layout({ params, children }: LayoutProps) {
  paramsCache.parse(params)
  return (
    <>
      <LayoutChild/>
      {children}
      <LayoutChild/>
    </>
  )
}

export async function generateStaticParams() {
  return [{ id 1 }, { id: 2 }, { id: 3 }]
}

function LayoutChild() {
  const id = paramsCache.get('id')
  return <div>{id}</div>
}

[franky47]

See an example in #573.

You can even access params in parent layouts above the [dynamic] route, as long as you take care of handling errors thrown by the cache (for cousin pages that are not under the [dynamic] path fragment). Whether or not you want to do this is a questionable architecture decision 😅