Using Plasmic in NextJS nested layout.

Developer Support
1

How can I use NextJS’ nested layout feature with Plasmic?
I have the following folder structure:

src/
 app/
   map/
     layout.tsx (Using a Component created by Plasmic as Layout for all nested routes. It basically has a Sidebar and a Content div with a Map in it)
     [viewport]/
       page.tsx (Created by Plasmic, it should use the above layout, so that I'm only re-rendering inner Components on navigation, my Map should not re-mount on navigation)

I can now make all my presentational components in Plasmic and just use them in my code project, but I loose the ability to view my Pages in Plasmic Studio? I have the impression, that the plasmic-host page renders the Page-Components exactly from the “Plasmic[PageNameHere]” Components and does not access the nested URL, thus not triggering NextJS to do the nesting and therefore I’ll not see the things in Plasmic Studio, which I would normally see on my Page? Is there a way around this? Can I use the Canvas Component somehow?

2

Are you saying you want to see the Layout in the page editor?
I’ve just been making my pages without nav/layout stuff and introducing it in the route layout.
it could be cool to have dynamic app-host routing. It would be kind of hacky but you could wrap canvas with the layout based on current pathName I think if you wanted to be able to see the page like it appears on the frontend

3

Ah, thanks @fine_constrictor, that’s a good idea… i did something similar now, I’m using a layout in my NextJS code which uses a Component from Plasmic and then changed the pages to render only specific slots of my Plasmic pages. This way it looks the same in plasmic and my code project but needs some manual maintenance… maybe your approach is better, I’ll try it.