Skip to content

RootLayout - how to provide currentUser to entire app while maintaining RootLayout as a server component #305

Open
@jamezening

Description

@jamezening

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions