What is the best practice to handling providers in layout
Unanswered
Brandt's Cormorant posted this in #help-forum
Brandt's CormorantOP
I'm working on migrating a react app to nextJS, I am not aware of the best pratice to handle the layout
is it a good idea to add "use client" to the main layout? will that affect my server actions?
is it a good idea to add "use client" to the main layout? will that affect my server actions?
3 Replies
@Brandt's Cormorant I'm working on migrating a react app to nextJS, I am not aware of the best pratice to handle the layout
is it a good idea to add "use client" to the main layout? will that affect my server actions?
the recommended practice is to make a
then use it in the root layout which remains a server component
app/providers.tsx"use client";
export function Providers({ children }) {
return (
<Your>
<Providers>
<Here>
{children}
</Here>
</Providers>
</Your>
);
}then use it in the root layout which remains a server component
export default function Layout({ children }) {
return <Providers>{children}</Providers>;
}@Brandt's Cormorant
You can create your provider component(client component) and then wrap the children by that provider component in the root layout to keep it server component.
You can create your provider component(client component) and then wrap the children by that provider component in the root layout to keep it server component.
Brandt's CormorantOP
Thanks!