How to update a property in root layout from a child page?
Unanswered
Bumble bee posted this in #help-forum
Bumble beeOP
I'm trying to learn next.js beyond the initial learner tutorial and started off building a relatively simple app using app router. I'm quite new to React and Next.js, coming primarily from an Angular background.
My question is, I want to have a page header in the layout, such that it says "Dashboard" on the home page, or "Account", or "Usersname's Posts" etc. This would have to be set by each page component updating that value up to the layout somehow. However, I can't
What's the appropriate way to accomplish this? I know I'm going to run into the same situation with the navigation bar, making the current page highlighted, etc.
My question is, I want to have a page header in the layout, such that it says "Dashboard" on the home page, or "Account", or "Usersname's Posts" etc. This would have to be set by each page component updating that value up to the layout somehow. However, I can't
useState with server components.What's the appropriate way to accomplish this? I know I'm going to run into the same situation with the navigation bar, making the current page highlighted, etc.
3 Replies
When you need these behaviors you create a Client Component and import it inside your Server Components.
It's all about mixing and matching both Client and Server components.
It's all about mixing and matching both Client and Server components.
Let's say you have
Here,
Or simple add
...
<html lang="en">
<body className="...">
<PageHeader/>
{children}
<PageFooter/>
</body>
</html>
...Here,
<PageHeader /> can simply be a client component that reads the path, or params or whatever you need to calculate the Header based on the page that's rendering.Or simple add
<PageHeader /> to each and every page.tsx file and make it a standard.Bumble beeOP
I need data that's being fetched in the page components (say, /user/1) to get the user's name to update the header to say "Sharf's Account".
It sounds like then the only way to do that is to take that header out of the layout. But it's nested within the navigation, not sure how I could de-couple them such that they get slotted back in the right spot.
And even then, having to have common template pieces like that in each component seems like a poor way to do things
It sounds like then the only way to do that is to take that header out of the layout. But it's nested within the navigation, not sure how I could de-couple them such that they get slotted back in the right spot.
And even then, having to have common template pieces like that in each component seems like a poor way to do things