محرك رندر الكتل الديناميكية (Block Renderer Engine)

1. آلية عمل BlockRenderer

كيفية قراءة نوع الكتلة ونمطها وتوجيهها للمكون المناسب في أجزاء من الثانية.

1. استلام مصفوفة كتل dynamic_zone من استعلام GraphQL أو REST الخاص بـ Strapi.
2. مطابقة خاصية __component بنوع الكتلة (مثل blocks.hero-section).
3. قراءة خاصية style المحددة من لوحة التحكم (style-1، style-2، أو style-3).
4. تحميل مكون React المطابق وتمرير الخصائص (Props) مع معالجة الترجمة الحالية.
5. تخزين النتيجة مؤقتاً في Next.js مع وسوم إعادة التحقق التلقائي.

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. إضافة كتل وأنماط جديدة

دليل خطوة بخطوة لبناء وتصدير نمط جديد وتضمينه في خريطة الكتل.

1. أنشئ مجلد الكتلة الجديد داخل src/components/blocks.
2. اكتب مكونات الأنماط (Style1.tsx، Style2.tsx).
3. أنشئ ملف index.ts وصدّر خريطة الأنماط الخاصة بالكتلة.
4. أضف الكتلة إلى خريطة المكونات الرئيسية في BlockRenderer.tsx.
5. عرّف مكون Strapi المطابق في لوحة إدارة المحتوى بنفس أسماء الحقول.
6. انشر التعديلات وجرّب الكتلة مباشرة في الصفحة الرئيسية.

3. التعامل مع الأخطاء والحالات غير المتوقعة

نظام حماية يمنع انهيار الصفحة في حال وجود بيانات ناقصة أو نمط غير معروف.

• مكون احتياطي (Fallback Component) يظهر تحذيراً ودياً للمطور في بيئة العمل.
• تسجيل الخطأ تلقائياً في سجلات OpenObserve المركزية لتشخيصه فوراً.
• تجاهل الكتل المعطلة في بيئة الإنتاج لضمان استمرار عمل بقية الصفحة.
• التحقق الصارم من صحة الحقول عبر TypeScript interfaces.

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>
}