How to get started with app hosting?

Hi, new to Plasmic, very cool. I’m coming from Builder - just curious to try new things. But I’m having a hard time understanding best practices around a next.js layout. I’ve read all the threads in here and the docs and scratching my head a bit.

// _app.tsx
<header>_app header</header>
<Component {...pageProps} key={router.pathname} />
<footer>_app footer</footer>
// plasmic-host.tsx
<header>host-header</header>
<PlasmicCanvasHost />
<footer>host-footer</footer>
// [[...slug]].tsx
<PlasmicRootProvider loader={PLASMIC} prefetchedData={page}>
  <PlasmicComponent component={pageMeta.name} />
</PlasmicRootProvider>

Is Plasmic data always pushed to the bottom of any content that exists? Or am I doing something wrong here?

The artboard will render your plasmic-host page, which means it’ll include the elements rendered by plasmic-host and the wrapping app.tsx.

You should avoid rendering extra stuff on plasmic-host.tsx. And for _app.tsx, you should avoid rendering anything if you’re rendering the plasmic-host page (one way to check is, in your App component, see if props.router.pathname === "/plasmic-host")

oh interesting - so in _app - check the route before rendering the layout wrapper?

so pages inside plasmic will never render their layout components. I see. Personally I like the “zones” better in Builder but i’ll get this all set up and play around with it