Posts list with plasmic, nextjs and mdx

The meat here is in tha default export component in page.tsx (since my setup asummes app router),

const Home = async ({ params, searchParams }: HomeProps) => {
  const articles = await getArticles();
  const plasmicData = await PLASMIC.fetchComponentData({
    projectId,
    name: 'Blog',
  });
  const compMeta = plasmicData.entryCompMetas[0];
  return (
    <>
      <PlasmicClientRootProvider
        prefetchedData={plasmicData}
        pageRoute={compMeta.path}
        pageParams={compMeta.params}
        pageQuery={searchParams}
      >
        <PlasmicComponent
          component={compMeta.displayName}
          componentProps={{
            title: 'Posts',
            description: 'List of posts',
            actualContent: articles.map((article, index) => (
              <PlasmicComponent
                key={index}
                component="Button"
                componentProps={{
                  title: article.frontMatter.title,
                  link: article.href,
                  children: (
                    <div>
                      {article.frontMatter.title} / {article.frontMatter.date}
                    </div>
                  ),
                  shape: 'sharp',
                  style: {
                    width: '100%',
                    marginTop: '8px',
                  },
                }}
              />
            )),
            actionItems: (
              <PlasmicComponent
                component="Button"
                componentProps={{
                  link: 'https://www.bulletninja.com/',
                  children: <span>&larr; Back home</span>,
                  shape: 'sharp',
                  style: {
                    width: '100%',
                  },
                }}
              />
            ),
          }}
        />
      </PlasmicClientRootProvider>
    </>
  );
};

Quick & not so dirty, but easy way that enables some consistency through the use of plasmic.