Codegen Guide: Pages

Pages are just a special case of components.

The main differences:

  • Pages have routes.
  • Pages have additional SEO metadata.
  • Pages are the “outermost” component so that’s where SSR data fetching happens.

This is typically what a page would look like in Next.js, as an example—this example shows handling dynamic route parameters as well:

Copy
// This is the main page component that Next.js renders.
export default function PageWithSlug({ queryCache }: { queryCache?: any }) {
  return <Body prefetchedCache={queryCache} params={useRouter().query} />;
}


// This performs a prepass to ensure all the data-fetching components on the page.
export const getStaticProps: GetStaticProps = async (ctx) => {
  const queryCache = await extractPlasmicQueryData(<Body params={ctx.params} />);
  return {
    props: { queryCache }
  };
};


// Optionally replace this with the actual list of pages you want to pregenerate.
// The current behavior is to lazily render the pages as they are requested, since we do not assume to know what are all possible slugs.
export async function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking'
  };
}


// We extract the render code here so that it can be called both from the main PageWithSlug component as well as called from prepass for data fetching.
function Body(props: { prefetchedCache?: any; params?: any }) {
  const router = useRouter();
  return (
    <PlasmicQueryDataProvider prefetchedCache={props.prefetchedCache}>
      <GlobalContextsProvider>
        <ph.PageParamsProvider route={router.pathname} params={props.params} query={props.params}>
          <PlasmicPagesslug />
        </ph.PageParamsProvider>
      </GlobalContextsProvider>
    </PlasmicQueryDataProvider>
  );
}

Here, we are showing how to pre-fetch any data that is requested by lower down in the React tree. Learn more about data-fetching.

The plasmic CLI should generate this page wrapper component at the default file location, under the pages/ dir, according to the current route that was set on the page in Plasmic Studio. As with all wrapper components, this file is owned by you and will not be edited by Plasmic subsequently—the initial generation is provided as a convenience, but if you later change the route, you’ll need to move the file in your codebase as well.

Was this page helpful?

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