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

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

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

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

Читайте также

  1. Список дел в формате RPG, экспресс-чтение по 5 минут в день и ещё 8 российских стартапов
  2. Руководство по передаче офлайн-конверсий в Яндекс Директ
  3. Что меня беспокоит в агентской разработке: заметки инженера в 2026 году
  4. Сигналы открытого интереса и автоматический трейдинг: пишем телеграм-бота для трейдинга
  5. Ваш ноутбук пока не готов к LLM, но скоро это изменится
Ключевые инсайты из новости (по версии ChatGPT)
  • SEO-паттерн: «список + фильтры» как главная, карта после контента: Для запросов с географией главную делают текстовой: список объектов с описаниями и ценами, а интерактивную карту грузят позже/на отдельной вкладке. Это сохраняет полноту HTML для бота и даёт UX-инструменты пользователю.
    [паттерн SEO]
Для получения полного доступа оформите подписку PubMag PRO.
Зарегистрированные пользователи видят только два тезиса.
Зарегистрироваться
Инсайты автоматически генерируются с помощью искусственного интеллекта на основе текста статьи.
← Назад в лентуЧитать оригинал →
✈️ Подписывайтесь на мой Telegram-канал — там еще больше интересного про AdTech, MarTech, AI и многое другое!