Задача

Требуется подготовить пример микроразметки для сайта, разработанного на фреймворке Next.js. Главная цель - добиться эффекта мини-галереи ссылок (карусели изображений) во фрагменте выдачи Яндекса, как показано на приложенном скриншоте (эталонном изображении).

Что требуется сделать

• Спроектировать и оформить корректную разметку JSON-LD (либо иную, предусмотренную Яндексом), обеспечивающую группировку товаров/услуг для отображения в виде мини-галереи.
• Учесть специфику Next.js: интеграция схемы должна работать как на клиенте, так и при серверном рендеринге (SSR) (без сброса стилей и ошибок рендеринга). возможно использовать компонент Head либо внешний скрипт с JSON-данными.
• Финальный ответ должен быть в виде готового к применению примера разметки с пояснениями по ключевым полям (название, описание, ссылки на изображения).
• Все конкретные названия фирм, сайты и телефонные номера из исходного запроса должны быть скрыты (заменены обобщенными данными). как пример можно использовать placeholder-изображения для галереи.

Требования к работоспособности

• Разметка должна проходить валидацию в инструментах Яндекса.
• Обеспечить правильную интерпретацию структуры: элементов внутри могут быть изображения, их названия и ссылки на страницы. с целью добиться интерактивной карусели миниатюр в сниппете.
• Объяснить настройку для Next.js - создать отдельный компонент для вставки JsonLd, чтобы не нарушить разметку страницы.

Ожидаемый результат

Понятное без воды описание и разметка в формате JSON (референс- пример) с возможностью скопировать и применить в проекте на Next.js.