layout ‘slots’?
Unanswered
Himalayan posted this in #help-forum
HimalayanOP
Hello. I have run into this problem quite often recently. Here is the scenario:
My app has a root layout that vaguely looks like
But, down in some nested route I would like to add components/display info in the
Is there a pattern for this? I looked at parallel routes, but the info/components I want to split between main/aside are very much linked/related
My app has a root layout that vaguely looks like
<div>
<header/>
<aside/>
<main>{children}</main>
</div>But, down in some nested route I would like to add components/display info in the
header or the asideIs there a pattern for this? I looked at parallel routes, but the info/components I want to split between main/aside are very much linked/related
20 Replies
Asian black bear
Are you talking about potentially displaying user data in the header? For example showing a username for a logged in user?
If you are then create the api route to get that user, then pass the data down using props. If this header is in the root layout this will be display throughout the app
If you are then create the api route to get that user, then pass the data down using props. If this header is in the root layout this will be display throughout the app
HimalayanOP
The data comes from a nested route down the tree from the layout
HimalayanOP
For example, if the user is on the /sports/basketball route, the aside would show the latest basketball events
Bluetick Coonhound
Can you use a state-managment for that? likewise zustand?
I did it the past, so my layout call a method to update the current path and save it in state, then the component that need to do something I just read the url and change whenever I want.
Zustand doens't required a provider, that is the first reason I love it
I did it the past, so my layout call a method to update the current path and save it in state, then the component that need to do something I just read the url and change whenever I want.
Zustand doens't required a provider, that is the first reason I love it
HimalayanOP
I mean I could render a component inside the aside that reads the pathname and renders based on that, but it just separates concerns
I might want to display an ‘event’ in the main segment, and show a list of all events in the aside. What if I had some state local to the event/main segment that I want to share with the aside segment?
I might want to display an ‘event’ in the main segment, and show a list of all events in the aside. What if I had some state local to the event/main segment that I want to share with the aside segment?
Also with that method it is hard to reason about if there is different behaviour for different routes. If I could change the content from inside the nested route it would be clear where the data is coming from for example
Ant
Sounds like a good usecase for
useContext ?Or state management as mentioned above
HimalayanOP
It’s not possible to render components via context is it? Not directly anyway?
Seems like the same issues I wrote above persist
Seems like the same issues I wrote above persist
HimalayanOP
I think I may use react portals
HimalayanOP
Unfortunately portals struggle in an SSR context a little. Not a perfect solution
Bluetick Coonhound
hum.. got it... I'd say parallel routes could help, but you've took a look .. I dont have any solution rn.
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
Asian black bear
Can you use the params to get the route and then send api call down to the components you want to display passing data down via props?
@Bluetick Coonhound hum.. got it... I'd say parallel routes could help, but you've took a look .. I dont have any solution rn.
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
That's indeed a good solution, by using parallel routes, you can pass
It's probably what you're looking for.
ReactNode to the nearest layout when visiting a specific page. It's probably what you're looking for.
HimalayanOP
I think parallel routes fits my use case when pre-rendering can happen, saving api calls. In other cases it would duplicate the api calls and also split up what was once local state into muddy semi-global state or context. Either way at least there’s a couple of options
Also may run into trouble utilising the slots across server/client boundaries
HimalayanOP
so a more concrete example: how could I create this, when the segments are related to the current route, and the labels would come from a database. Would that component just have to cause an extra db call? seems wasteful
(image from the nextjs docs https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts)
@Himalayan so a more concrete example: how could I create this, when the segments are related to the current route, and the labels would come from a database. Would that component just have to cause an extra db call? seems wasteful
the Next.js docs breadcrumb is just doing this client-side, same as how others do
parallel routes do make sense in this case, since Next.js can cache fetch requests
parallel routes do make sense in this case, since Next.js can cache fetch requests
HimalayanOP
ok, I'll make a parallel route for header/main/aside/footer i suppose. i kind of forget the magical cacheing next is doing