RootLayout - how to provide currentUser to entire app while maintaining RootLayout as a server component #305
Description
Currently in the RootLayout, the currentUser is only provided to the <Header> component.
Is there a way to "provide" the currentUser to the entire app (including <main> and its children), without making the RootLayout into a client component so that user related state is available not just in Header ?
export default async function RootLayout({ children }) {
const { currentUser } = await getAuthenticatedAppForUser();
return (
<html lang="en">
<body>
<Header initialUser={currentUser?.toJSON()}/>
<main>{children}</main>
</body>
</html>
);
}
There are other Firebase + NextJS examples out there that wrap the entire <main> tag in a React Context Provider - still figuring out if it is performant to make the RootLayout into a client component.
Thank you for any insights on this matter.