Hello, we’re trying to inject a component onto a next.js page that is dynamic (The content on the page changes based on the slug). It’s a page that uses SSR, and we want to display some editorial content on the page specific to the slug. Is there a way to do this with different versions of one component? I was looking into registering custom traits and trying to split content based on those traits, but when I tried to set up an app host, Plasmic studio got really wonky. Is there another easy way to do this, where we could use the URL to split content?
Hi, even without reaching for custom traits, you could simply create a component inside of plasmic that takes props or has different variants. Your component can then display different content based on those props or variants. And then from the SSR page, you can render that plasmic component and passing whatever props or variance you want to render
<PlasmicComponent component="Foo" componentProps={{variant: true}}/>
Let me know if that helps or if you have some more details about what you’re trying to display conditionally!
Hey Yang, Thanks for the quick response! In this case, the pages describe different watch brands, and we want to display some editorial content about the brands.
/watches/rolex will have a title and description about Rolex as a brand
/watches/omega will have omega.
Most of the page is built in next and shows listings for watches we have on sale, but the editorial content is to give more info on the brand itself
How would I create a variant in plasmic studio and tell it what prop to look for. I can definitely pass in the props on the SSR page based on your code example
Got it! For something like that, where it sounds like it’s going to be pretty different content for each slug, you can go even simpler and create entirely different components or pages in plasmic. (It doesn’t matter too much which type of thing you create, the main difference for this case is that pages when you specify some metadata about the route URL that they are associated with)
So you can create one page called Omega with route /watches/omega, one page called Rolex, etc. And then render PlasmicComponent component=“Omega” or =“/watches/omega” (same thing)
And optionally, if you want the different pages to have the same consistent layout, you can create a component (let’s say it’s called Watch Editorial) that each of the above pages uses.
Let me know if that makes sense
Okay, yeah that makes sense, we can definitely create different components for each brand and dynamically query the, from our code. One thing I’m worried about is that we do have close to a 100 brands so it might end up becoming a lot of components. If we reuse a common layout component, will the changes to the original layout component automatically apply to all pages?
Yes it will. Components will allow your content to scale.
You can think of the react code equivalent as defining a bunch of different pages that all render the same common component. Updating that component centrally updates all pages, so that your edits can scale.