Pages

Render <AmplifyPage /> from your generated component registry on pages you compose in Amplify Up.

The SDK owns the component lookup. You add component files; the SDK builds the registry from them, renders each component, and gives it the context Field, Slot, Image and RichText need. Don't write your own lookup or render function — SDK 0.2.0 removed that API.

// next.config.js
const { withAmplifyUp } = require('@amplifyup/sdk/next');

module.exports = withAmplifyUp({
  // your existing Next config
});

// app/page.tsx
import { AmplifyPage } from '@/.amplifyup/component-registry';

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

next dev and next build build the registry from src/components (or components/ without src/). Dev rebuilds it as you add, rename or remove files.

Component registry

File	Serves component ID
src/components/Hero.tsx	Hero, hero
src/components/Hero/index.tsx	Hero, hero
src/components/promo-card.tsx	promo-card, PromoCard

• Each file needs a default export or a named export with the file's name.
• Matching ignores case and separators. Two files that resolve to the same name stop the build.
• Tests, stories and type files are skipped.
• A component ID with no matching file shows a placeholder in Composer and renders nothing on the live page.

Components live somewhere else? Add an optional amplifyup.config.ts:

import { defineAmplifyConfig } from '@amplifyup/sdk/config';

export default defineAmplifyConfig({
  components: { roots: ['src/components', 'src/marketing'], exclude: ['**/internal/**'] },
});

Not on Next.js, or building in CI? Install @amplifyup/cli and run npx amplifyup registry before your build (--watch during development).

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.