Recommended workflow to integrate with a headless CMS

Developer Support
1

Good afternoon, please tell me how my workflow should look like if I want to create next js or gatsby applications and then integrate it with headless cms (strapi) the question is that I read the strapi documentation and they always offer to first configure the backend and then request all collections and data in my application and after that write markup and style… what should I do if I design in plasmic?

2

Plasmic will be your source of truth for the design, and strapi will be your source of truth for the content. So you’d mix them up in your nextjs app like…

export async function getStaticProps() {
  const strapiData = await fetchStrapiDataForThisPage();
  const plasmicData = await PLASMIC.fetchComponentData("/this-page");
  return {
    props: {strapiData, plasmicData}
  };
}

export default function ThisPage({strapiData, plasmicData}) {
  return (
    <PlasmicRootProvider loader={PLASMIC} prefetchedData={plasmicData}>
      // now pass in data from strapi as slot content or overrides
      // for your page component
      <PlasmicComponent name="/this-page"
        title={strapiData...}
      />
    </PlasmicRootProvider>
  );
}
3

Thank you very much, but I don’t fully understand what I should do yet)) it should be like this:? 1. I create an application in plasmic and publish it. 2. I deploy strapi. 3 I need to recreate a content model in Strapi that will match the design in plasmic, right?) 4. Where should I insert this code?)

4

Good afternoon! That’s a great question. If you’re using Plasmic for design and want to integrate it with a headless CMS like Strapi in a Next.js or Gatsby application, your CMS development workflow can be slightly adjusted. Typically, Strapi suggests setting up the backend first to define your content types and collections, then pulling that data into your frontend.

However, since Plasmic allows you to focus on design first, you can start by creating your UI and components in Plasmic, then move on to configuring your Strapi backend to match the data structure needed for those designs. This approach is often recommended by any CMS development company in Dubai or elsewhere that prioritizes a design-first methodology.

Once the backend is ready, you can fetch and bind dynamic data to your Plasmic components via code components or data fetching hooks in Next.js or Gatsby. So essentially, your flow would be: design in Plasmic → define content structure in Strapi → connect and render dynamic content in your app. This way, you maintain a smooth integration between design and content, and your CMS development process stays organized around the final design vision.