Modüler Blok Oluşturucu Motoru (Block Renderer Engine)

1. Next.js 16 İçinde BlockRenderer Çalışma Mantığı

Motor, her blok türünü görsel varyantıyla eşleştiren ve özellikleri (Props) tip güvenli olarak aktaran dinamik bir bileşen haritasına dayanır.

1. Strapi GraphQL veya REST sorgusundan dynamic_zone blok dizisi alınır.
2. __component özelliği blok türüyle (örn: blocks.hero-section) eşleştirilir.
3. Yönetim panelinde seçilen style varyantı (style-1, style-2, style-3) okunur.
4. İlgili React bileşeni geçerli dil çevirileriyle birlikte yüklenir ve render edilir.
5. Sonuç, Next.js önbellek etiketleriyle birlikte hızlı sunum için saklanır.

import React from "react"
import { ProductShowcaseProps } from "../types"
 
export default function ProductShowcaseStyle3({ block, products }: ProductShowcaseProps) {
  return (
    <section className="py-12 bg-gradient-to-r from-gray-900 to-black text-gray-900 dark:text-white">
      <h2 className="text-xl font-bold mb-6">{block.title}</h2>
    </section>
  )
}

2. Mevcut Bir Bloğa Yeni Bir Stil Nasıl Eklenir?

Sistemin geri kalanına dokunmadan yeni bir görsel stil eklemek için şu adımları izleyin:

1. src/components/blocks/hero altında yeni HeroStyle4.tsx bileşenini oluşturun.
2. Bileşeni bloğun index.ts dosyasındaki stil haritasına ekleyin ve dışa aktarın.
3. Strapi yönetim panelinde bloğun stil alanına style-4 seçeneğini ekleyin.
4. Strapi'de sayfayı yayınlayarak yeni stilin anında canlandığını görün.
5. Gerekirse TypeScript tiplerini güncelleyin.
6. Sayfayı test ederek stil geçişini doğrulayın.

3. Hata Yönetimi ve Yedek Bileşenler (Fallback)

Tanımlanmamış bir stil veya eksik veri durumunda sayfanın çökmesini önleyen koruma katmanı.

• Geliştirme modunda geliştiriciye uyarı gösteren şık yedek bileşen (Fallback).
• Hatanın OpenObserve merkezi log sistemine anında kaydedilmesi.
• Üretim ortamında sayfanın geri kalanının kesintisiz çalışmaya devam etmesi.
• TypeScript arayüzleri ile katı veri doğrulama.

import React from "react"
import ProductShowcaseBlock from "./ProductShowcaseBlock"
import FeaturesBlock from "./FeaturesBlock"
import BlockAnimateWrapper from "./BlockAnimateWrapper"
 
 
export default async function BlockRenderer({ block, region, countryCode, index }) {
  let BlockContent: React.ReactNode = null
 
  switch (block.__component) {
    case "ui.product-showcase-block":
      BlockContent = <ProductShowcaseBlock block={block} region={region} countryCode={countryCode} />
      break
    case "ui.features-block":
      BlockContent = <FeaturesBlock block={block} />
      break
    default:
      return null
  }
 
  return <BlockAnimateWrapper index={index}>{BlockContent}</BlockAnimateWrapper>
}