Componer páginas, secciones y bloques

Componer una página

cms.page() convierte una lista JSX de secciones en el documento local versionado, resuelve el locale y renderiza la región CMS. Incluye SEO local para que el sitio siga completo cuando no hay publicación remota.

import { cms } from '@/cms/site';
import { HeroCms } from './sections/Hero';
import { BenefitsCms } from './sections/Benefits';
 
export const HomeCmsPage = cms.page({
  key: 'website:home',
  path: '/',
  navigation: {
    id: 'home',
    label: { es: 'Inicio', en: 'Home' },
  },
  seo: {
    es: { title: 'Mi website', description: 'Descripción inicial.' },
    en: { title: 'My website', description: 'Initial description.' },
  },
  sections: (
    <>
      <HeroCms instanceId="hero" />
      <BenefitsCms instanceId="benefits" />
    </>
  ),
});

instanceId es estable dentro del documento. No lo derives del índice visual ni lo cambies solo por renombrar una sección; Platform usa esa identidad para asociar contenido remoto con su nodo local.

Conectar la ruta Next.js

Metadata y render usan el mismo adapter:

import { HomeCmsPage } from '@/content/home/HomeCmsPage';
 
export function generateMetadata() {
  return HomeCmsPage.metadata();
}
 
export default function HomePage() {
  return <HomeCmsPage />;
}

metadata() usa SEO publicado compatible y vuelve al SEO local. Para sitemap, colecciones o rutas dinámicas, usa las utilidades del objeto declarado en servidor en vez de duplicar el acceso HTTP.

Shells y contenido global

Usa cms.shell() para documentos como header y footer, sin construir CmsDocument manualmente:

export const HeaderCmsShell = cms.shell({
  path: '/site-header',
  regionId: 'shell.header',
  content: <SiteHeaderCms instanceId="header" />,
});

Los shells se renderizan desde el layout del website. Sus valores iniciales son code-first; después del bootstrap, los borradores y publicaciones se administran en Platform.

Para valores reutilizados por varias páginas, define grupos con defineCmsGlobals. Los defaults viven en código y los valores publicados los cubren. Dentro de campos locales, cmsGlobal("grupo", "campo") crea una referencia que el runtime resuelve sin importar el sitio server-only.

Colecciones

cms.collection() modela entidades con rutas repetibles, como artículos, soluciones o casos. No sustituye a cms.repeater(): una colección produce entradas direccionables; un repeater pertenece al contenido de un único documento.

export const solutions = cms.collection({
  key: 'solutions',
  title: 'Soluciones',
  route: '/solutions/{slug}',
  entries: localSolutionSeeds,
});
 
export const SolutionCmsPage = solutions.page({
  key: 'website:solution',
  sections: <SolutionHeroCms instanceId="hero" />,
});

Usa entries(locale), entry(slug, locale), staticParams(locale) y path(slug) desde Server Components. Las entradas locales permanecen como fallback y las publicaciones remotas compatibles las sustituyen.

Qué pertenece al código