Bileşenler

Bu sayfada bileşen registry'sinin nasıl çalıştığını, eşleşmeyen bileşenlere ne olduğunu ve siteye yeni bir blok eklemeyi öğreneceksin.

RegistryCopy Anchor Link

Site şablonunda bir CMS bileşenini React bileşenine bağlayan tek yer COMPONENT_REGISTRY nesnesidir. src/components/cms/DynamicComponent.tsx içinde durur.

const COMPONENT_REGISTRY = {
  "top-banner": () => Promise.resolve(null),
  custom: () => import("./CustomComponent"),
  "markdown-content": () => import("./MarkdownContent"),
  form: () => import("./FormContainer"),
} as const;

Her anahtar bir bileşen slug'ıdır. Her değer, bileşeni tembel yükleyen bir import() fonksiyonudur.

Eşleşme sırasıCopy Anchor Link

DynamicComponent önce düğümün slug alanına bakar. slug yoksa componentType değerinin küçük harfli hâlini kullanır. Anahtarlar küçük harfle karşılaştırılır.

Hazır bloklarCopy Anchor Link

Bileşene giden propsCopy Anchor Link

DynamicComponent düğümün tüm alanlarını props olarak geçirir: children, data, uniqueId, slug, title ve diğerleri. Ek olarak pageData gelir. pageData sayfa yanıtının kendisidir ve bir shareUrl alanı içerir. İhtiyacın olmayan alanları yok say.

Eşleşmeyen bileşenlerCopy Anchor Link

Bileşenin import() çağrısı hata verirse yerine kırmızı bir Error loading component kutusu çizilir ve hata sunucu loguna yazılır.

Yeni bir blok eklemekCopy Anchor Link

Sözleşmenin tamamı registry'ye bir satır ve src/components/cms/ altına bir dosyadır. Başka kayıt yeri yoktur.

import type { ApiComponent } from "@/types/cms";

interface HeroBannerProps {
  children?: ApiComponent[];
  pageData?: Record<string, unknown>;
  [key: string]: unknown; // kullanmadığın alanları yok say
}

const pick = (c: ApiComponent[] | undefined, slug: string) =>
  c?.find((x) => x.slug === slug)?.data as string | undefined;

export default function HeroBanner({ children }: HeroBannerProps) {
  const title = pick(children, "title");
  if (!title) return null; // eksik veri: hiçbir şey çizme

  const description = pick(children, "description");

  return (
    <section className="py-16">
      <h1 className="text-4xl font-bold">{title}</h1>
      {description && <p className="mt-4 text-muted-foreground">{description}</p>}
    </section>
  );
}

const COMPONENT_REGISTRY = {
  // …
  "hero-banner": () => import("./HeroBanner"),
} as const;

Denetleyici desteğiCopy Anchor Link

Önizleme sitesinde panel, sayfadaki bir öğeye tıklayınca ilgili bileşeni seçebilir. DynamicComponent her üst düzey bloğu zaten işaretler. İç öğelerin de seçilebilmesini istiyorsan cmpAttrs sonucunu o öğeye yay:

import { cmpAttrs } from "@/lib/inspector";

// …
<li key={item.uniqueId} {...cmpAttrs(item.uniqueId, item.slug)}>
  {/* … */}
</li>

cmpAttrs, NEXT_PUBLIC_INSPECTOR_ENABLED kapalıyken boş bir nesne döner. Canlı sitede hiçbir öznitelik eklenmez.

İpuçlarıCopy Anchor Link

• Her alan eksik olabilir. Bileşen kendi varsayılanlarını taşımalı.
• Çocukları sırayla değil, slug ile bul.
• Liste içinde key olarak uniqueId kullan, id değil.
• "use client" yalnızca durum, efekt ya da tarayıcı API'si gerektiğinde ekle.