How to define props for layouts based on route

[devanecondition]

I have been looking through the docs and other resources about the app router, but it's still not clear to me what the best pattern for this is:

I have a Layout file which wraps around many pages. Depending on what route is user is viewing, I need things in that parent layout to update. Examples:

• the layout contains a provider for i18n translations as well as text that needs to be translated. Based on the page route, this provider should be able know which namespaces to load/initialize to properly translate all the text in the layout and its children. If I move that provider to the page file, its parent layout wont translate. If I use it in both places, it gets initialized twice, which causes bugs.
• My layout contains a nav component which displays a headline based on what page is viewed.

I've been scratching my head thinking about how to set that up. Ideas I've had are:

• use useSelectedLayoutSegments in the parent layout, and then roll my own route-matching decision tree in a util to get the needed props. This requires client components, however, and I'm not sure if that will mess up server-side rendering the translations, etc..
• use middleware and/or headers to do something similar to provide the props. Sounds like this would have some performance consequences though.

What's the best way?

[icyJoseph]

Layouts do not have access to the route segments below itself. To access all route segments, you can use useSelectedLayoutSegment or useSelectedLayoutSegments in a Client Component.

I think you are in the right path with idea 1.

This requires client components, however, and I'm not sure if that will mess up server-side rendering the translations

Client components are still SSR'd, though, but yeah, you cannot access context, nor props from a client component, into a server component. Though you can probably use composition, within these client components, to determine which server components to render. https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#interleaving-server-and-client-components

[devanecondition]

Thanks!