PlasmicLoader guide: pages

By default, once you have set up PlasmicLoader in your Next.js or Gatsby configuration, then any pages you create in your Plasmic project will automatically show up in your built site at the associated routes. No further code changes are needed. (Existing pages at conflicting routes take precedence; Plasmic projects never clobber what’s already in your codebase.)

If you would like to attach code to a page, such as attaching props (data, event handlers) or replacing elements or invoking hooks, you can create a page file at the corresponding route, and render the Plasmic page from there. This effectively creates a wrapper around the Plasmic-rendered page.

For instance, let’s say you created a Plasmic page called “Enterprise Landing Page” at the route /landing/enterprise.

Add a file for the page at the following path:

Copy

pages/landing/enterprise.tsx

And insert this code:

Copy

import * as React from 'react';
import PlasmicLoader from '@plasmicapp/loader';

export default function PageComponent() {
  return <PlasmicLoader component="Enterprise Landing Page" />;
}

This works because whenever there is both a Plasmic page and a file in your codebase that exist at the same route, your code takes precedence; Plasmic will never clobber what’s in your code.

Now you can add arbitrary other code to this. Learn more about the PlasmicLoader component API. The following example shows how to fetch some data, render it into a slot, and attach an event handler to a contact form submit button:

Copy

// Fetch data from your CMS.
export async function getStaticProps(context) {
  const blogPosts = await fetch('...');
  return {
    props: { blogPosts }
  };
}

export default function PageComponent({ blogPosts }) {
  return (
    <>
      {/* Include/wrap your page with any other elements. */}
      <Head>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <PlasmicLoader
        component="Enterprise Landing Page"
        componentProps={{
          // Render the blog posts into a slot.
          blogPosts: blogPosts
          // Attach props to any named element.
          contactFormSubmitBtn: {
            onClick: (e) => {
              /* ... */
            }
          }
        }}
      />
   </>
  );
}

Was this page helpful?

Have feedback on this page? Let us know on our forum.