Freelance2026

Aments Storefront

E-shop v Next.js so serverovým renderovaním a prísnou dátovou architektúrou Route → Query → Mapper → UI.

Renderovanie: SSR
Dátové vrstvy: 4
i18n: Jazyk na serveri

01Prehľad

E-commerce frontend pre backend, ktorého tvar JSON frontend nemá pod kontrolou. Cieľ: UI komponenty vždy čítajú stabilné kľúče, aj keď sa API zmení.

02Problém

Keď komponenty čítajú surové polia API priamo, každé premenovanie na backende rozbije UI na mnohých miestach a komponenty sa plnia záložnou logikou typu raw?.name ?? raw?.title ?? "".

03Architektúra

Každá vrstva má jednu zodpovednosť a iba mapper vie, ako vyzerá JSON z backendu.

Sekcie a karty

Čítajú len stabilné kľúče - bez záložnej logiky

Route

Server page.jsx

Určí jazyk, zavolá dopyty, odovzdá props

Query

*.query.js

Požiadavka + extrakcia + mapovanie + filter

Mapper

*.mapper.js

Surový JSON → tvar pre UI s predvolenými hodnotami

Prenos

ApiService

HTTP klient

apiRoutes

Konštanty endpointov

04Komponenty

Mappery

Jediné miesto, ktoré pozná tvar API

Začnú objektom predvolených hodnôt, skopírujú známe polia a odvodia zobrazované hodnoty (počty, odkazy).

Dopyty

Jedna funkcia na endpoint

Odstránia opakovaný kód požiadavky a extrakcie a vyradia neplatné položky skôr, než sa dostanú do UI.

Cesty

Skladanie na serveri

Dáta získavajú na serveri v jazyku používateľa a pri chybe použijú prázdny zoznam - nefunkčný endpoint tak nikdy nerozbije stránku.

05Ako to funguje

1
Route
Serverová stránka určí jazyk a zavolá dopyt.
2
Query
Pošle požiadavku na endpoint cez ApiService a vytiahne res.data.data.
3
Mapper
Každú surovú položku prevedie na stabilný tvar pre UI.
4
UI
Dostane props a vykreslí cat.name, cat.image, cat.items, cat.href.

06Technické detaily

Mapper s predvolenými hodnotami

Ak backend premenuje orderCount, zmení sa len táto funkcia - všetky komponenty naďalej čítajú items.

src/mappers/popular-category.mapper.jsjs

const PopularCategoryDefaults = {
  id: null, name: "", image: "", items: "(0 Items)", href: "/products",
};

export function mapPopularCategory(raw = {}) {
  return {
    ...PopularCategoryDefaults,
    id: raw?.id ?? PopularCategoryDefaults.id,
    name: raw?.name ?? PopularCategoryDefaults.name,
    image: raw?.image ?? PopularCategoryDefaults.image,
    items: `(${Number(raw?.orderCount ?? 0) || 0} Items)`,
    href: raw?.id != null
      ? `/products?categoryId=${encodeURIComponent(String(raw.id))}`
      : PopularCategoryDefaults.href,
  };
}

07Návrhové rozhodnutia

Antikorupčná vrstva

Mapper izoluje UI od externého API - klasický vzor domain-driven designu aplikovaný na frontend.

Mäkké zlyhanie na serveri

Neúspešný dopyt vráti prázdny zoznam; stránka sa aj tak vykreslí.

08Technológie

Frontend: Next.js (App Router)ReactJavaScriptBootstrap gridSSR

Ďalšia prípadová štúdia

Diaspor.org

Multi-tenant publikačná platforma: vlastný spravodajský web pre každú organizáciu diaspóry a jeden národný kanál.