#Best way to share Navbar state to AppShell Header/Navbar via layout.tsx

4 messages · Page 1 of 1 (latest)

primal gyro
#

This might be a dump question but my understanding is in Next.js 14 it would be best to have the AppShell markup in a top level layout.tsx which is a server component due to use of metadata api which means useDisclosure or any other client specific hooks/functionality can't be used. I've created a NavbarProvider which is setup as a client component and has the opened/toggled vals which are then loaded into separate MainLayout, Header and Navbar client components via useContext, and they are loaded into layout.tsx server component such that the structure is:

layout.tsx

  • MainLayout
    • Header
    • Navbar

Is this efficient or is there another recommended way of achieving this?

bold coyote
primal gyro
#

Thanks @bold coyote, so here's another for you - is it better to load vars via useContext in each of the components that need them or ok to load in parent and pass via props to child comps?

bold coyote