How to build a magazine style interaction?

Developer Support
1

Hello dear Plasmic Community!

I wanted to add something to @reasonable_termite from the developer point of view.

As she mentioned, the idea is to build a website that acts like a magazine, dynamically re-rendering parts of the page without having to re-route the user to a different page.
Both of us are new to Plasmic, so we still have to figure out how it works.

From a dev PoV

We’re using NextJS for development.
I’d ideally want to have 1 page (route) per issue.
Meaning the current issue of the magazine should be rendered in index.tsx (or the root of the website).
Inside of that I’d like to have one or more components that have different layouts. I’m not sure if we should have different components or different variants of 1 component for that.
These components should then fetch data from the CMS depending on the nr. of the issue.
Whenever the user clicks on the arrow buttons, new content and possibly a new layout should get rendered on that site.

Since the magazine will consist of many pages (as in book pages, not web pages), we’d want to avoid creating hundreds upon thousands of pages/components to not clutter the UI. Given the fact that an issue will consist of about 100 magazine pages and there will be multiple issues per year (which should also be stored at an archive), we’d rather not create every single issue manually and store it inside of the UI without the option of structuring the pages within folders or something like that.

I’ve been reading the documentation about custom components and overrides but I’m still not too sure how I’d solve this in the most ideal way.
What’s the best way to go about this?

TLDR;
We’re using NextJS and want to build a site that re-renders part of the page with dynamic content from the CMS.

Kind regards and thank you for your help

2

Hi! Sounds like what you’d want are code components: https://docs.plasmic.app/learn/code-components/

You can create your own code component that would fetch data from a CMS and render it. So you could build the magazine layout in Plasmic, but let the code component fetch and render the data for each “page”

3

Thanks for the reply @chungwu.

Yeha, I was thinking about code components too. Still not entirely sure how to go about this, since we’re planning to add approx. 20 layouts to our magazine but each issue of the magazine would have a different “order” of the layout because the design of each issue will be somewhat individualized.

So I’d have to have a logic that makes it possible for the content creator (my client) to just manually select the layout for each magazine page.

Do you think such a logic is possible with Plasmic? If so would you recommend the PlasmicLoader or CodeGen?

Kind regards and thank you again for your support.