Freelance2026

Aments Storefront

Ciddi Route → Query → Mapper → UI data arxitekturası olan, serverdə render olunan Next.js onlayn mağazası.

Render: SSR
Data qatları: 4
i18n: Serverdə dil

01Ümumi baxış

JSON forması frontendin nəzarətində olmayan backend üçün e-ticarət frontendi. Məqsəd: API dəyişsə belə, UI komponentləri həmişə sabit açarları oxusun.

02Problem

Komponentlər xam API sahələrini birbaşa oxuyanda backenddəki hər ad dəyişikliyi UI-ni bir çox yerdə sındırır, komponentlər isə raw?.name ?? raw?.title ?? "" kimi ehtiyat məntiqi ilə dolur.

03Arxitektura

Hər qatın bir vəzifəsi var və backend JSON-unun necə göründüyünü yalnız mapper bilir.

Bölmələr və kartlar

Yalnız sabit açarları oxuyur - ehtiyat məntiqi yoxdur

Route

Server page.jsx

Dili müəyyən edir, sorğuları çağırır, props ötürür

Query

*.query.js

Sorğu + çıxarma + map + filtr

Mapper

*.mapper.js

Xam JSON → susmaya görə dəyərlərlə UI forması

Nəqliyyat

ApiService

HTTP müştərisi

apiRoutes

Endpoint sabitləri

04Komponentlər

Mapper-lər

API formasını bilən yeganə yer

Susmaya görə dəyərlər obyektindən başlayır, məlum sahələri köçürür, göstəriləcək dəyərləri (saylar, linklər) hesablayır.

Sorğular

Hər endpoint üçün bir funksiya

Təkrarlanan sorğu/çıxarma kodunu aradan qaldırır və yanlış elementləri UI-yə çatmamış atır.

Marşrutlar

Serverdə kompozisiya

Serverdə istifadəçinin dili ilə data alır və xəta olanda boş siyahıya keçir - beləliklə sınmış endpoint səhifəni sındırmır.

05Necə işləyir

1
Route
Server səhifəsi dili müəyyən edir və sorğunu çağırır.
2
Query
ApiService vasitəsilə endpoint-ə sorğu göndərir və res.data.data-nı çıxarır.
3
Mapper
Hər xam elementi sabit UI formasına çevirir.
4
UI
Props alır və cat.name, cat.image, cat.items, cat.href-i render edir.

06Texniki təhlil

Susmaya görə dəyərləri olan mapper

Backend orderCount-un adını dəyişsə, yalnız bu funksiya dəyişir - bütün komponentlər items-i oxumağa davam edir.

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,
  };
}

07Dizayn qərarları

Anti-korrupsiya qatı

Mapper UI-ni xarici API-dən təcrid edir - frontendə tətbiq edilmiş klassik domain-driven design nümunəsi.

Serverdə yumşaq uğursuzluq

Uğursuz sorğu boş siyahı qaytarır; səhifə yenə də render olunur.

08Texnologiyalar

Frontend: Next.js (App Router)ReactJavaScriptBootstrap gridSSR

Növbəti case study

Diaspor.org

Multi-tenant nəşr platforması: hər diaspor təşkilatı üçün brendli xəbər saytı və vahid milli lent.