Next.js (SSR)

Интеграция @mushket-co/block-builder/react в App Router с серверной загрузкой блоков (React 18+ / 19; пример examples/next — на React 19)

Живое SSR-демо для Next.js нет в интерактивном demo-bb. Запустите examples/next из block-builder/examples (npm run example:next, port 3008).

Установка

next.config

Server + Client Component

Server Component загружает и обогащает блоки → Client Component рендерит редактор с initialBlocks.

API Route Handlers

SSR-утилиты

Экспортируются из @mushket-co/block-builder/react:

  • prepareBlocksForDisplay — восстанавливает render из конфигурации типов
  • enrichBlockForDisplay — обогащение одного блока
  • seedRepositoryFromBlocks — синхронизация репозитория после гидрации
  • enableViewportBreakpointDetection — spacing после гидрации
  • canRenderVueBlock — можно ли отрендерить блок как Vue-компонент
  • canRenderReactBlock — можно ли отрендерить блок как React-компонент
  • resolveVueComponentForBlock — резолв Vue-компонента из блока и реестра
  • resolveReactComponentForBlock — резолв React-компонента из блока и реестра
  • getDefaultBreakpoint — имя брейкпоинта по умолчанию для spacing
  • isClient — true в браузере
  • isServer — true при SSR
  • isViewportBreakpointDetectionEnabled — активно ли определение брейкпоинта по viewport
  • resetViewportBreakpointDetection — сброс состояния определения брейкпоинта

enrichBlocksForSsr в примере — проектная функция для предзагрузки api-select данных (newsList и т.п.) на сервере.

Живой пример в репозитории

examples/next — App Router, Route Handlers, порт 3008

Базовый React API — в разделе React.