Движок рендеринга модульных блоков (Block Renderer Engine)

1. Как работает BlockRenderer в Next.js 16

Движок опирается на динамическую карту компонентов, сопоставляющую каждый тип блока с его вариантом дизайна и передающую типизированные свойства (Props).

1. Массив dynamic_zone извлекается из GraphQL- или REST-запроса Strapi.
2. Свойство __component сопоставляется с типом блока (напр., blocks.hero-section).
3. Считывается вариант оформления, выбранный в админ-панели (style-1, style-2, style-3).
4. Соответствующий React-компонент загружается и связывается с переводами текущей локали.
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. Карта типов компонентов и свойств

Строгое определение интерфейсов TypeScript для каждого блока (Hero, Витрина товаров, Особенности, Баннеры), исключающее ошибки во время выполнения.

1. Создайте новый компонент HeroStyle4.tsx в папке src/components/blocks/hero.
2. Экспортируйте компонент в карте стилей в файле index.ts блока.
3. Добавьте опцию style-4 в поле выбора стиля блока в панели Strapi.
4. Опубликуйте страницу в Strapi, чтобы мгновенно увидеть обновленный дизайн.
5. При необходимости обновите определения интерфейсов в TypeScript.
6. Проверьте страницу в браузере для подтверждения корректной работы стиля.

3. Паттерн Фабрика и динамический выбор стилей

Каждый блок делегирует визуальный рендеринг определенному подкомпоненту на основе значения поля `style` (style-1, style-2 и т.д.).

• Элегантный компонент-заглушка (Fallback), отображающий предупреждения разработчику в dev-режиме.
• Мгновенная отправка отчета об ошибке в централизованную систему логов OpenObserve.
• В продакшене остальная часть страницы продолжает работать без сбоев.
• Строгая проверка данных через интерфейсы TypeScript.

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