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

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

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

  • Результат: статический сайт с быстрой загрузкой и повышенной безопасностью; индексация началась, трафик пока небольшой.
  • Трудности: жизнь без бэкенда (ручные обновления и ребилды), нюансы SSR/CSR и гидрации в Next 13+.
  • Планы: расширение каталога и статей, при росте объёма — вынос данных в CMS/API; возможны сравнение посёлков и ипотечный калькулятор.
Ключевые инсайты из новости (по версии ChatGPT)
  • SEO-паттерн: «список + фильтры» как главная, карта после контента: Для запросов с географией главную делают текстовой: список объектов с описаниями и ценами, а интерактивную карту грузят позже/на отдельной вкладке. Это сохраняет полноту HTML для бота и даёт UX-инструменты пользователю.
    [паттерн SEO]
Для получения полного доступа оформите подписку PubMag PRO.
Зарегистрированные пользователи видят только два тезиса.
Зарегистрироваться
Инсайты автоматически генерируются с помощью искусственного интеллекта на основе текста статьи.
← Назад в лентуЧитать оригинал →
✈️ Подписывайтесь на мой Telegram-канал — там еще больше интересного про AdTech, MarTech, AI и многое другое!