Renderowanie

Renderuj treść cmssy w swojej aplikacji

Jedna trasa catch-all zamienia każdą opublikowaną stronę - bloki, layout, SEO i język - w renderowany serwerowo HTML na Twoim własnym froncie Next.js.

Renderowanie

Trasa catch-all, komponent strony, metadane, layout, routing językowy i rewalidacja ISR.

Trasa catch-all

Workspace cmssy przechowuje treść; Twoja aplikacja ją renderuje. Jedna opcjonalna trasa catch-all - app/[[...path]]/page.tsx - mapuje każdy opublikowany slug (i jego prefiks języka) na stronę. createCmssyPage pobiera stronę dla bieżącej ścieżki, dopasowuje każdy blok do zarejestrowanego komponentu i renderuje go na serwerze.

Trasa catch-all jest renderowalna statycznie: nigdy nie czyta searchParams ani headers(), więc ISR pozostaje włączone. Podgląd wersji roboczej nadal działa per-request przez 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);

Komponent strony i konfiguracja

createCmssyPage(config, blocks, options?) zwraca asynchroniczny komponent serwerowy. config pochodzi z defineCmssyConfig; blocks to tablica definicji defineBlock, które SDK dopasowuje po type. Przekaż { editor }, aby zamontować edytor wizualny na trasie podglądu, lub { path }, aby przypiąć trasę jednej strony.

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,
});

Co obejmuje ta sekcja

Trasa catch-all, komponent strony, metadane, layout, routing językowy i rewalidacja ISR.

Okablowanie, jedna sprawa na stronę. Za pierwszym razem przeczytaj po kolei; potem skacz.

Route'y i strony - konfiguracja, middleware, publiczny catch-all i route edycyjny. Skopiuj w całości: elementy zależą od siebie.
Layouty - header i footer jako edytowalne bloki i dlaczego pominięcie edytowalnego wrappera psuje po cichu.
Podgląd roboczy - trzy sposoby zobaczenia nieopublikowanej treści i sekret za każdym z nich.
i18n - locale, prefiksy URL i co się renderuje przy braku tłumaczenia.
SEO - metadane, sitemapa i robots, wszystko po stronie Twojej aplikacji.
Skrypty - analityka i tagi zewnętrzne oraz CSP, które je blokuje.

Jedna rzecz do zabrania na wszystkie: SDK renderuje bloki i montuje edytor, i na tym kończy. Metadane, sitemapa, helpery locale i sesja członka to kod Twojej aplikacji - po to, co odpytujesz sam, zajrzyj do API dostawczego.