Hello, is it possible to setup global layouts in the plasmic studio? Say for example make a Navbar and footer available on every page without creating it manually each time?
Hi Jay,
If you are using Nextjs, you can simply override your _app.jsx and wrap your Component prop with Plasmic synced Navbar and Footer components as follow.
Note:
This will ensure that every page you design in Plasmic Studio will be wrapped in that particular layout i.e Navbar and Footer.
However, the Navbar and Footer won’t show up in the Plasmic Studio for each page. You can assume that whenever a new page is created in Plasmic Studio, it will get wrapped in Navbar and Footer when it’s synced.
// pages/_app.js
export default function MyApp({ Component, pageProps }) {
return (
<Navbar />
<Component {...pageProps} />
<Footer />
)
}
For more details about Layout feature in Nextjs, please follow the link below.
https://nextjs.org/docs/basic-features/layouts
Thanks for the clarification @zonal_mammal. I was leaning towards overiding _app.jsx ,but was hoping there was away to make the layout explicit in the studio.
Thansk @zonal_mammal!
@warm_swallow If you want to build the header and footer in studio, you can build a component called Layout, which has the header, a slot, and a footer. Then from each of the pages, you can insert this Layout component, and fill in its slot with the body content of the page. Let me know if that makes sense.
@yang Considering both the approaches, wouldn’t it be less performant to use Layout on every page, as it will rerender the layout component on every redirect.
Also, we will have to maintain a separate state to make it’s state persistent on every redirect.
In my own project, I used a Layout component with the first approach of just wrapping Component with it.
// pages/_app.jsx
I am curious, if there is any way to attach a static property to Page Component from Plasmic Studio. It will help me simplify my solution.
For example, inside our Layout component we want to conditionally render stuff based on Page Component static property isAuthenticated
<Layout isAuthenticated={Component.isAuthenticated}>
Is it possible to give isAuthenticated static prop to Page Component from Plasmic Studio?
@yang your approach makes sense. My original goal was to completely avoid having to insert shared components every time I create a page. Inserting 1 component per page definitely beats N components though.
@zonal_mammal why would Yang’s approach be less performant? Wouldn’t the wrapper in _app.jsx also trigger renders if its state were to change?
@warm_swallow I might be wrong but as per my understanding, adding Layout component manually to each page will render a completely new instance of that Layout component on each page, hence the state (local state) of Layout component get reset on page redirect.
However, if we wrap it in _app.jsx it will only be render once and page redirect shouldn’t affect the Layout state hence it’s called persistent layout.
Note:
If you are using global state from redux or any state management library then state reset won’t happen but Layout rerender will happen.
@zonal_mammal Yep, you’re right in that state is discarded if you are navigating across pages, so if you care to preserve that then you’ll want to add layout to your _app component (and you can use your suggestion of building the Layout component, or separate Header/Footer components, in Plasmic)
@zonal_mammal I ended up adding my navbar directly to _app.tsx but now my nav bar shows up even when editing non page components
Does it show up in the Plasmic Studio or in the actual code?
If it’s in the actual code, then my follow up question is how does it relates to non page component as normal component either remains unused or get rendered by a particular page.
The navbar is rendered properly on the site and and on the artboard for all pages. The issue is that when accessing studio I see a flash of the nav bar before the studio loads fully sometimes its shown alongside the studio’s loading animation (the 3 grey bars). The navbar also appears on non-page artboards so for example when viewing the artboard for a button component, the navbar is also shown . I’ll attach images to demonstrate
function MyApp({ Component, pageProps }: AppProps) {
return (<PlasmicRootProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</PlasmicRootProvider>)
}
snippet from _app.tsx
return (
<>
<NextNprogress />
<NavBar noOfItems={noOfItems} />
{React.cloneElement(props.children,{cartHolder:{cart,setCart}})}
</>
)
snippet from Layout.tsx
Can you please confirm if you are using code components and you have registered components using PlasmicHost.