Theo's Typesafe CultTTC
Theo's Typesafe Cult2y ago
10 replies
Lobstrate

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
CleanShot_2024-06-08_at_20.52.57.png
Solution
you can do something like this:
/[id]/[color]/


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 too
Was this page helpful?