Rendu

Afficher le contenu cmssy dans votre app

Une seule route catch-all transforme chaque page publiée - blocs, layout, SEO et langue - en HTML rendu côté serveur sur votre propre frontend Next.js.

Rendu

La route catch-all, le composant de page, les métadonnées, le layout, le routage localisé et la revalidation ISR.

La route catch-all

Un workspace cmssy stocke le contenu ; votre app le rend. Une route catch-all optionnelle - app/[[...path]]/page.tsx - associe chaque slug publié (et son préfixe de langue) à une page. createCmssyPage récupère la page pour le chemin courant, associe chaque bloc à votre composant enregistré et le rend côté serveur.

La route catch-all est rendue statiquement : elle ne lit jamais searchParams ni headers(), donc l'ISR reste actif. L'aperçu des brouillons fonctionne toujours par requête via draftMode().

import { createCmssyPage } from "@cmssy/next/server";
import { cmssy } from "@/cmssy.config";
import { blocks } from "@/cmssy/blocks";

export const revalidate = 3600;

// The public route stays static. A verified editor request is rewritten by the
// middleware onto app/cmssy-edit/[[...path]], mounted with createCmssyEditPage.
export default createCmssyPage(cmssy, blocks);

Composant de page & configuration

createCmssyPage(config, blocks, options?) renvoie un composant serveur asynchrone. config provient de defineCmssyConfig ; blocks est le tableau des définitions defineBlock que le SDK associe par type. Passez { editor } pour monter l'éditeur visuel sur la route d'aperçu, ou { path } pour fixer une route mono-page.

import { defineCmssyConfig } from "@cmssy/next";

// Pass process.env raw: defineCmssyConfig validates at startup and names any
// variable you are missing. A `?? ""` fallback would hide that, and the error
// would surface later, somewhere unrelated.
//
// This module reads server env. Never import a VALUE from it (or from a module
// that imports it) in a "use client" component - types are erased, values drag
// process.env into the browser bundle.
export const cmssy = defineCmssyConfig({
  org: process.env.CMSSY_ORG_SLUG,
  workspaceSlug: process.env.CMSSY_WORKSPACE_SLUG,
  draftSecret: process.env.CMSSY_DRAFT_SECRET,
});

Ce que couvre cette section

La route catch-all, le composant de page, les métadonnées, le layout, le routage localisé et la revalidation ISR.

Le câblage, un sujet par page. Lisez dans l'ordre la première fois ; ensuite, sautez.

Routes et pages - configuration, middleware, route catch-all publique et route d'édition. À reprendre en entier : les pièces dépendent les unes des autres.
Layouts - en-tête et pied comme blocs éditables, et pourquoi oublier le wrapper éditable casse en silence.
Aperçu brouillon - les trois façons de voir du contenu non publié, et le secret derrière chacune.
i18n - locales, préfixes d'URL et ce qui s'affiche quand une traduction manque.
SEO - métadonnées, sitemap et robots, tous portés par votre application.
Scripts - analytics et balises tierces, et la CSP qui les bloque.

Une chose à emporter partout : le SDK affiche les blocs et monte l'éditeur, puis s'arrête. Métadonnées, sitemap, helpers de locale et session membre sont le code de votre application - voyez l'API de diffusion pour ce que vous interrogez vous-même.