Как мы сделали карту коттеджных посёлков на Next.js без бэкенда и с SEO-оптимизацией

Команда описывает разработку интерактивной карты и каталога коттеджных посёлков без бэкенда, ориентированного на лидогенерацию для агентства. Стек: Next.js (SSG, серверный рендер), переход с v13 к релизу на 15, React 19, TypeScript, MUI v6 + Emotion, точечно styled-components, Яндекс.Карты через @pbe/react-yandex-maps. Данные хранатся на фронтенде как TypeScript-модули; около 50 посёлков. Наполнение: скриншоты агрегатора → OCR → ChatGPT → ручная валидация.

SEO-стратегия: главная страница — текстовый список с фильтрами, карта загружается клиентски (в т.ч. через next/dynamic с ssr:false). Каждая карточка посёлка генерируется статически, добавлены мета-теги и JSON-LD. Фильтрация на клиенте по массиву объектов. Для избежания проблем гидрации чётко разведены серверные и клиентские компоненты; карта монтируется в пустой контейнер после гидрации. Метки на карте кастомизированы через templateLayoutFactory (плашки с ценами).

• Результат: статический сайт с быстрой загрузкой и повышенной безопасностью; индексация началась, трафик пока небольшой.
• Трудности: жизнь без бэкенда (ручные обновления и ребилды), нюансы SSR/CSR и гидрации в Next 13+.
• Планы: расширение каталога и статей, при росте объёма — вынос данных в CMS/API; возможны сравнение посёлков и ипотечный калькулятор.