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?)