Wiring

// lib/registry.tsx
'use client'
import { createPageRenderer, createArticleBody } from '@sp-stage/next/render';
import { Hero } from '@/components/home/Hero';
import { FeatureGrid } from '@/components/home/FeatureGrid';
import { Slider } from '@/components/blog/Slider';

export const PageRenderer = createPageRenderer({ hero: Hero, 'feature-grid': FeatureGrid });
export const ArticleBody = createArticleBody({ slider: Slider });   // per-site blocks only; prose is built in

import { stageAttrs, stagePath } from '@sp-stage/next';
import { StageMedia } from '@sp-stage/next/render';
import { sanitizeHtml } from '@sp-stage/sdk';

export function Hero({ title, body, image, imageVideo, _stageId, _stageType }: HeroProps) {
  return (
    <section {...stageAttrs(_stageId, _stageType)}>
      <h1 {...stagePath('props.title')}>{title}</h1>
      <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(body) }} {...stagePath('props.body', { rich: true })} />
      <StageMedia image={image} video={imageVideo} path="props.image" alt="" sizes="100vw" className="…" priority />
    </section>
  );
}

// app/(site)/about/page.tsx
import { cache } from 'react';
import { ensureStage } from '@sp-stage/next/server';
import { getPages, getGlobals } from '@sp-stage/sdk';
import { PageRenderer } from '@/lib/registry';

const load = cache(async () => {
  ensureStage();
  const [pages, globals] = await Promise.all([getPages(), getGlobals()]);
  return { page: pages.find((p) => p.slug === 'about') ?? null, globals };
});

export async function generateMetadata() { const { page } = await load(); /* seo fields */ }

export default async function About() {
  const { page, globals } = await load();
  return page ? <PageRenderer page={page} globals={globals} /> : null;
}

// pages/preview/[[...slug]].tsx
import { getPreviewPageProps } from '@sp-stage/next/server';
import { PreviewDenied } from '@sp-stage/next/render';
import { PageRenderer } from '@/lib/registry';

export const config = { unstable_runtimeJS: false };
export const getServerSideProps = (ctx) => getPreviewPageProps(ctx);

export default function Preview({ page, globals, articles, denied }) {
  if (denied) return <PreviewDenied />;
  return page ? <PageRenderer page={page} globals={globals} articles={articles} /> : <p>No page</p>;
}

// app/browse/[[...slug]]/page.tsx
import { cookies } from 'next/headers';
import { resolvePreviewPage } from '@sp-stage/next/server';
import { PreviewDenied } from '@sp-stage/next/render';

export const dynamic = 'force-dynamic';

export default async function Browse({ params, searchParams }) {
  const [{ slug }, sp, cookieStore] = await Promise.all([params, searchParams, cookies()]);
  const r = await resolvePreviewPage({ cookieHeader: cookieStore.toString(), slug, stagedToken: typeof sp.staged === 'string' ? sp.staged : null });
  if (r.denied) return <PreviewDenied />;
  return r.page ? <PageRenderer page={r.page} globals={r.globals} articles={r.articles} /> : <p>No page</p>;
}

// app/admin/page.tsx — server shell for metadata; renders the client component below
// app/admin/AdminApp.tsx
'use client'
import { StageAdmin } from '@sp-stage/next/admin';
import { ADMIN_SCHEMA } from '@/lib/admin-schema';

export function AdminApp() {
  return <StageAdmin schema={ADMIN_SCHEMA} previewBase="/preview/" browseBase="/browse/" editChrome="notch" />;
}

<ArticleBody body={article.body} className="flex flex-col gap-2" _stageId={article.id} _stageType="article-body" />

// app/api/revalidate/route.ts
import { createRevalidateRouteHandler, ensureStage } from '@sp-stage/next/server';
import { getArticles } from '@sp-stage/sdk';

export const POST = createRevalidateRouteHandler({
  // The API sweeps page paths. Add the routes only this site knows.
  expandPaths: async (paths) => {
    ensureStage();
    const articles = await getArticles();
    return [...paths, '/news', ...articles.map((a) => `/news/${a.slug}`)];
  },
});