An API you can cache, a model you can diff.

app/[...slug]/page.tsx

import { Blocks, getDeliveryClient, seoToMetadata, cacheTags } from "@modularcms/next";
import { expand } from "@modularcms/delivery";
import { Hero, CardGrid, Quote } from "@/components/blocks";

export async function generateMetadata({ params }) {
  const path = "/" + (await params).slug.join("/");
  const page = await getDeliveryClient().content.item(path);
  return page ? seoToMetadata(page.seo, page) : {};
}

export default async function Page({ params }) {
  const path = "/" + (await params).slug.join("/");
  const cms = getDeliveryClient({ tags: [cacheTags.path(path)] });
  const page = await cms.content.item(path, { expand: expand({ blocks: true }) });

  return (
    <Blocks
      items={page?.properties.sections?.items}
      components={{ hero: Hero, cardGrid: CardGrid, quoteBlock: Quote }}
    />
  );
}

The adapter wires draft mode, cache tags, SEO metadata, images, rich text, menus, and personalization into the App Router. The same page code renders drafts and published content.