Teraz z AI - twórz strony przez serwer MCP
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.

Last updated: 24 lipca 2026

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.

// app/[[...path]]/page.tsx
import { buildCmssyMetadata, createCmssyPage } from "@cmssy/next/server";
import { cmssy } from "@/cmssy/config";
import { blocks } from "@/cmssy/blocks";

export const revalidate = 3600;
export const dynamicParams = true;

const renderPage = createCmssyPage(cmssy, blocks);

type PageProps = { params: Promise<{ path?: string[] }> };

export async function generateMetadata({ params }: PageProps) {
  return buildCmssyMetadata(cmssy, (await params).path);
}

export default function Page({ params }: PageProps) {
  return renderPage({ params });
}

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().

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.

// cmssy/config.ts
import { defineCmssyConfig } from "@cmssy/next";

export const cmssy = defineCmssyConfig({
  apiUrl: process.env.CMSSY_API_URL,
  org: process.env.CMSSY_ORG_SLUG,
  workspaceSlug: process.env.CMSSY_WORKSPACE_SLUG,
  draftSecret: process.env.CMSSY_DRAFT_SECRET,
});

Metadane i SEO

buildCmssyMetadata(config, path, options?) zwraca kompletny obiekt Metadata Next.js z pól SEO strony i brandingu workspace: tytuł, opis, słowa kluczowe, canonical oraz alternatywy hreflang per język, a także karty Open Graph / Twitter. Wywołaj go w generateMetadata (patrz trasa powyżej).

Przekaż ścieżkę catch-all tak, jak została zroutowana - z prefiksem języka. To prefiks mówi SDK, który język renderować; jeśli go najpierw usuniesz, każde tłumaczenie odziedziczy tytuł domyślnego języka i canonical wskazujący na domyślny URL, co dla wyszukiwarek oznacza, że tłumaczenie jest duplikatem.

buildCmssyMetadata(cmssy, path, {
  image: "https://assets.cmssy.io/og.png",
  ogType: "article",
});

Header i footer

Współdzielone regiony - header, footer - to bloki layoutu. Renderuj je w app/[[...path]]/layout.tsx: fetchLayouts pobiera grupy layoutu, CmssyServerLayout renderuje jedną position, a CmssyLocaleProvider udostępnia aktywny język blokom klienckim.

// app/[[...path]]/layout.tsx
import { fetchLayouts, resolveSiteLocales, CmssyServerLayout } from "@cmssy/react";
import { splitCmssyLocale } from "@cmssy/core";
import { CmssyLocaleProvider } from "@cmssy/next/client";
import { blocks } from "@/cmssy/blocks";
import { cmssy } from "@/cmssy/config";

export default async function Layout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ path?: string[] }>;
}) {
  const { path } = await params;
  const [{ locale }, siteLocales, groups] = await Promise.all([
    splitCmssyLocale(cmssy, path),
    resolveSiteLocales(cmssy),
    fetchLayouts(cmssy, "/"),
  ]);

  const slot = (position: "header" | "footer") => (
    <CmssyServerLayout
      groups={groups}
      blocks={blocks}
      position={position}
      locale={locale}
      defaultLocale={siteLocales.defaultLocale}
      enabledLocales={siteLocales.locales}
    />
  );

  return (
    <html lang={locale}>
      <body>
        <CmssyLocaleProvider
          value={{
            current: locale,
            default: siteLocales.defaultLocale,
            enabled: siteLocales.locales,
          }}
        >
          {slot("header")}
          {children}
          {slot("footer")}
        </CmssyLocaleProvider>
      </body>
    </html>
  );
}

Routing językowy

cmssy koduje język jako prefiks ścieżki: /about to język domyślny, /pl/about to polski. Ta sama trasa catch-all obsługuje oba. splitCmssyLocale(config, path) czyta włączone języki workspace i oddziela prefiks od reszty - bez żądania i nagłówków, więc pozostaje statyczny.

const { locale, path: rest } = await splitCmssyLocale(cmssy, path);
// ["pl", "about"]  ->  locale "pl", rest ["about"]
// ["about"]        ->  locale "en" (default), rest ["about"]

ISR i rewalidacja na żądanie

Opublikowane strony są cache'owane i regenerowane przez ISR przez export const revalidate. Aby odświeżać natychmiast po publikacji, dodaj trasę na żądanie i skieruj na nią webhook content.changed workspace. cmssy wysyła POST ze zmienioną path; trasa rewaliduje ją lub cały serwis (zakres layout), gdy ścieżka nie jest podana. Zabezpiecz ją współdzielonym sekretem.

// app/api/revalidate/route.ts
import { revalidatePath } from "next/cache";
import { NextResponse, type NextRequest } from "next/server";

export async function POST(request: NextRequest) {
  const secret = process.env.CMSSY_REVALIDATE_SECRET;
  const provided =
    request.nextUrl.searchParams.get("secret") ??
    request.headers.get("x-revalidate-secret");
  if (!secret || provided !== secret) {
    return NextResponse.json({ revalidated: false }, { status: 401 });
  }

  const { path } = (await request.json().catch(() => ({}))) as { path?: string };
  if (path) revalidatePath(path);
  else revalidatePath("/", "layout");

  return NextResponse.json({ revalidated: true, path: path ?? "/" });
}

Następne kroki