Загрузите и проверьте данные на серверной границе, преобразуйте DTO в понятные поля карточки и отдельно реализуйте загрузку следующей страницы. Не выводите технические коды пользователю без форматирования.
Как построить Next.js-каталог недвижимости по API-контракту?
Загрузите и проверьте данные на серверной границе, преобразуйте DTO в понятные поля карточки и отдельно реализуйте загрузку следующей страницы. Не выводите технические коды пользователю без форматирования.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Учебный API GET /api/lots возвращает {items:[{id,project,city,rooms,area,imageUrl}],nextCursor}. Area — число м², rooms=0 означает студию. API реализован отдельно; адрес берётся из конфигурации. Требуется каталог Next.js App Router с карточками, пагинацией и понятными состояниями.
Ответ
Загрузите и проверьте данные на серверной границе, преобразуйте DTO в понятные поля карточки и отдельно реализуйте загрузку следующей страницы. Не выводите технические коды пользователю без форматирования.
Карточка показывает проект, город, «Студия» при rooms=0 или число комнат, площадь с единицей и изображение с alt/fallback. Проверяйте HTTP-статус и схему ответа; для пустого items и ошибки нужны разные состояния. Курсор передавайте по контракту, без вычисления следующей страницы из длины массива. Секрет API остаётся на сервере; кеширование объявляется явно согласно требованиям свежести, а не предполагается по версии Next.js.
Источник: nextjs.org.