Next.js Discord

Discord Forum

Making layout.js a client component.

Answered
ABUL KALAM posted this in #help-forum
Open in Discord
I want to display header, footer and sidebar on each page, so I am adding these components to layout.js. I have to control sidebar expansion from the header and for that purpose, I will have to add state in layout.js file and make it a client component.
Is it good?
Answered by Ray
1. create a route group. eg. app/(layout)/layout.tsx and you can set it to client component
2. use react context/zustand/jotai instead of turning a layout to client component
View full answer

3 Replies

I am thinking of making a separate component and putting this 👇 thing in that component.
<Header />
<Sidebar />
{children}
<Footer />
@ABUL KALAM I am thinking of making a separate component and putting this 👇 thing in that component. js <Header /> <Sidebar /> {children} <Footer />
1. create a route group. eg. app/(layout)/layout.tsx and you can set it to client component
2. use react context/zustand/jotai instead of turning a layout to client component
Answer