Разработка интерфейса каталога на Next.js в Одессе

Пока позиций сто, каталог работает как угодно. На нескольких тысячах всё решает интерфейс: можно ли сузить выборку несколькими щелчками, понятно ли, что сейчас отфильтровано, и можно ли отправить коллеге ссылку именно на этот набор.

Стек
Next.js, React
Фокус
Интерфейс выборки
Объём
Тысячи позиций
Схема фронтенд-архитектуры: компоненты, рендеринг, API-интеграции и сборка для продакшенаКОМПОНЕНТЫРЕНДЕРИНГAPICMSBUILDTYPESCRIPT · ИНТЕГРАЦИИ · PERFORMANCE

Когда каталог
становится сложным

  • Много позиций

    Листать список уже невозможно.

  • Много признаков

    Размер, тип, совместимость, наличие.

  • Технический подбор

    Клиент ищет по параметрам.

  • Ссылка на выборку

    Подборку надо переслать.

Из чего состоит
работа с выборкой

Сначала описываются признаки товара, и только потом из них строятся фильтры.

  • Признаки

    По чему действительно фильтруют, а что лишнее.

  • Типы фильтров

    Переключатель, диапазон, поиск, список.

  • Состояние в адресе

    Выборка отражается в ссылке.

  • Пустой результат

    Что показать, когда ничего не найдено.

  • Порядок выдачи

    Правила сортировки по умолчанию.

Что работает
в готовом каталоге

  • Фильтры без перезагрузки

    Список обновляется на месте.

  • Видимое состояние

    Выбранные условия показаны и снимаются.

  • Догрузка

    Позиции добавляются порциями.

  • Сохранённые выборки

    Адрес открывает тот же набор.

Вопросы о
каталог на Next.js

  • Это то же самое, что интернет-магазин?

    Нет. Здесь речь об интерфейсе просмотра и подбора позиций. Корзина, оформление и оплата — отдельная задача, и она может как быть частью проекта, так и не быть нужной вовсе.

  • Откуда каталог берёт позиции?

    Из того источника, который уже ведёт компания: учётной системы, базы или системы управления контентом. Ручное дублирование позиций на сайте мы стараемся убрать, а не закрепить.

  • Выдержит ли интерфейс тысячи позиций?

    Для этого список и показывают порциями, а фильтрацию выполняют на сервере, а не в браузере. Конкретное поведение проверяем на реальном объёме данных до запуска, а не на десятке тестовых карточек.

  • Попадут ли страницы фильтров в поиск?

    Часть может, если выборка имеет самостоятельный смысл и открывается по собственному адресу. Какие именно комбинации открывать для индексации — отдельное решение, и оно принимается вместе со структурой каталога.

Разберём структуру вашего каталога в Одессе

Пришлите перечень признаков, по которым ищут клиенты, — из них и строится интерфейс подбора.