Next.js, внешний API, Zod, нормализация и controlled fallback

Любой внешний API тащит свою модель данных: как названы поля, что там за вложенные объекты, где картинки, где цены, по каким правилам крутится пагинация — всё это вотчина провайдера. А UI приложения живёт в собственной модели, и с чужой она не совпадает.

Начнёшь дёргать event._embedded.venues[0].city.name напрямую из компонента — и всё, структура внешнего ответа расползлась по интерфейсу. Провайдер поменял API — у тебя поехали карточки, detail page, search, metadata и тесты.

В App Router запрос наружу можно гонять на сервере: Server Components умеют fetch, а серверный код в клиентский bundle не просачивается. API key при такой схеме остаётся вне браузера — документация Next.js описывает server-side data fetching для App Router. В учебном проекте EventMap внешний источник событий ходит через серверный API-слой.

Читать далее

👉 Node.JS [ru]