Creating this layout in Nextjs with RSC with URL state
I am trying to create this layout in Next JS, i'd like to use the server components while making it snapy between changes, i've checked out parallel routes in nextjs, but trying that out, there is a delay when user clicks on the button and sidebar appearing cuz of route change
Solution:Jump to solution
you can do something like this:
you create two layouts, one for
/[id] and another for /[color]
...5 Replies
I don't think you need a parallel routes for this. Just treat the sidebar as a route. If it doesn't feel snappy, try setting
prefetch={true} on the Link that changes the route.
Actually, now that I think about it, you might want to use parallel routes, depending on how complex the layout actually is. But either way, prefetching the routes should still make the experience faster.
Note that prefetch is only for production builds. In dev mode it won't feel as snappy.Ahh that makes sense cuz of prefetch ! And i am also facing the issue for closing the sidebar, i am redirecting it back to /[id] when close button is clicked, but the sidebar won't go away even tho the route changes. it does go away when i refresh manually
Hmm, i believe its cuz of https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#active-state-and-navigation.
But tried this solution with
app/@sideMenu/[...catchAll]/page.tsx, which still didn't work https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#closing-the-modalhi
Solution
you can do something like this:
you create two layouts, one for
/[id] and another for /[color]
in the layout of /[id] you put the squares and use usePath() to check if the path has a color, and if the color matches one of the squares, you change its style.
in the layout of /[color] you put the sidebar, and using the params the layout will receive, you can change its style tooOh let me try this out
It works !! thanks