Zaawansowane funkcje bloków - Cmssy Headless SDK

Bloki layoutu

Header, footer i inne współdzielone regiony to bloki layoutu — takie same jak bloki strony, ale oznaczone layoutPositions i renderowane przez CmssyServerLayout per pozycja.

// blocks/header/block.ts
import type { ComponentType } from "react";
import { defineBlock, fields } from "@cmssy/react";
import Component from "./src";

export const headerBlock = defineBlock({
  type: "header",
  label: "Header",
  layoutPositions: ["header"],
  component: Component as unknown as ComponentType<{ content: Record<string, unknown> }>,
  props: {
    logo: fields.media({ label: "Logo" }),
    links: fields.repeater({
      label: "Navigation",
      fields: {
        label: fields.singleLine({ label: "Label" }),
        url: fields.link({ label: "URL" }),
      },
    }),
  },
});

Renderuj pozycję w app/layout.tsx przez CmssyServerLayout (zobacz repo cmssy-web).

Stylowanie z Tailwind v4

Bloki są stylowane Tailwindem. Zaimportuj globalny arkusz raz, a potem używaj klas utility w komponentach.

/* styles/main.css */
@import "tailwindcss";

@theme {
  --color-background: oklch(1 0 0);
  --color-foreground: oklch(0.145 0 0);
  --color-primary: oklch(0.205 0 0);
}

Komponenty serwerowe i klienckie

Bloki to standardowe komponenty Next.js. Domyślnie renderują się jako komponenty serwerowe — zero JS po stronie klienta. Dodaj "use client" na górze komponentu tylko gdy potrzebuje hooków, handlerów zdarzeń, API przeglądarki lub animacji klienckich.

"use client";
import { useState } from "react";

export default function StatsCounter({ content }: { content: Record<string, unknown> }) {
  const [n, setN] = useState(0);
  // ...
}

Animacje scroll / wejścia wymagają komponentu klienckiego. Jeśli blok używa reveal-on-scroll (framer-motion whileInView, initial={{ opacity: 0 }}, IntersectionObserver), musi być komponentem klienckim ("use client"), żeby animacja zadziałała — inaczej serwerowy HTML zostaje przy opacity:0 i treść nigdy się nie pojawi na opublikowanej stronie (w edytorze wygląda dobrze, bo renderuje się po stronie klienta).

Pobieranie danych w blokach

Po własne modele, rekordy, formularze czy site config użyj klienta danych z @cmssy/react zamiast context bloku:

import { createCmssyClient } from "@cmssy/react";

const client = createCmssyClient({
  apiUrl: process.env.CMSSY_API_URL!,
  workspaceSlug: process.env.CMSSY_WORKSPACE_SLUG!,
});
// client.records(...), client.form(...), client.siteConfig() ...

Możesz też wysłać GraphQL bezpośrednio przez graphqlRequest. Auth i definicje formularzy nie są w context bloku w headless — pobierz je przez klienta.

Bloki layoutu

Stylowanie z Tailwind v4

Komponenty serwerowe i klienckie

Pobieranie danych w blokach

Następne kroki