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 остаётся вне браузера. Server-side data fetching для App Router описан в документации Next.js.

В учебном проекте EventMap события из внешнего источника ходят не напрямую, а через server API слой.

Читать далее

👉 Frontender's notes