What's the best Nextjs architecture?
I have a Nextjs app where the current architecture is:
- app
-- [locale]
--- /home
---- page.tsx
---- loading.tsx
- clientLayout.tsx
- layout.tsx
- loading.tsx
The layout.tsx is something like this:
<ClientLayout>
{children}
</Clientlayout>
Where the ClientLayout is a client side and the page is server side (using dynamic routes).
So it’s a layout (server side) with a clienteLayout (client side) wrapping a page (server side).
Does make sense to split the clientLayout in two sub-components like
`<TopClientLayout />
{children}
< BottomClientLayout />
So the children (pages) wouldn't be wrapped by a client Component ?
3 Replies
there is no problem by wrapping the
{children} inside a client component.
the pages will be rendered as a server component and work as intended toRendering: Composition Patterns | Next.js
Recommended patterns for using Server and Client Components.
its up to you tbh. if you want to divide your clientLayout into two sub components and render them or just do what you're doing rn