Pages

Use AmplifyPageContent from the Node SDK React entry (@amplifyup/sdk/react) on pages you compose in Amplify Up.

import { AmplifyPageContent, ComponentContextProvider } from '@amplifyup/sdk/react';
import { Hero } from '@/components/Hero';

const registry = { Hero };

function renderComponent(componentId, props, slots, context) {
  const Component = registry[componentId];
  if (!Component) return null;
  return (
    <ComponentContextProvider
      props={props}
      slots={slots}
      layoutNodeId={context?.layoutNodeId}
      componentId={componentId}
    >
      <Component {...props} />
    </ComponentContextProvider>
  );
}

export default function Page() {
  return <AmplifyPageContent renderComponent={renderComponent} fallback={<YourStaticPage />} />;
}

What visitors see

Situation	Result
Published route	Edge-resolved layout (personalized + CMS props)
Unpublished or error	fallback
Composer iframe / ?preview=true	Draft layout canvas (fallback hidden)

On Next.js, generate static pages at build from Edge so the first HTML is the composed layout. See Static pages.

Always wrap components through ComponentContextProvider so Field and Slot can read fields and slots.