Harmal — lüks zərgərlik e-ticarəti və idarəetmə paneli
Bakıda əl işi zərgərlik və təbii ipək kəlağayı satan lüks marka üçün üç dilli e-ticarət saytı. Next.js ilə full-stack qurulub: redaksiya üslublu vitrin, jurnal bölməsi və brendin özünün idarə etdiyi admin panel — məhsul, kolleksiya, jurnal yazıları və gələn müraciətlər üçün.
Canlı sayta bax- Müştəri
- Harmal — əl işi zərgərlik və ipək kəlağayı brendi, Bakı
- Rol
- Full-stack development — layihənin bütün qatları: üç dilli frontend arxitekturası, Next.js route handler-ləri, Prisma/SQLite məlumat modeli, JWT əsaslı admin autentifikasiyası, şəkil yükləmə axını, performans və VPS-də deploy (PM2 + Nginx).
- Stack
- Next.js · TypeScript · Prisma · SQLite · Tailwind CSS
- Tarix
- Avqust 2026
- Dil
- 3 — AZ / EN / RU
- Lighthouse (mobil)
- 93
- Lighthouse (masaüstü)
- 93
Lüks zərgərliyin onlayn satışında iki ayrı problem var. Birincisi güvəndir: müştəri əşyanı əlinə almadan, dörd rəqəmli məbləği ekrandakı fotoya baxaraq ödəməlidir. Adi e-ticarət şablonu — sıx məhsul şəbəkəsi, endirim etiketləri, «tez al» düymələri — bu güvəni qurmur, əksinə brendi ucuzlaşdırır. İkincisi sayt yayımlandıqdan sonra başlayır: kolleksiya mövsümlə dəyişir, qiymət qızılın kursundan asılıdır, jurnala müntəzəm yazı düşür. Hər belə dəyişiklik üçün developerə yazmaq lazımdırsa, sayt bir neçə aya köhnəlir — praktikada brend saytı yeniləməkdən sadəcə əl çəkir.
- Üç dilli interfeys — azərbaycan, ingilis və rus dilləri, hər biri ayrıca ünvanda
- Kolleksiya vitrini və məhsul kateqoriyaları
- Brendin mənşəyini danışan redaksiya üslublu bölmələr
- Müştəri rəyləri bölməsi
- Tarixli yazılarla jurnal (bloq) bölməsi
- Tez-tez verilən suallar bölməsi
- Keyfiyyət prinsiplərini izah edən «Harmal Standartı» bölməsi
- Başlıqda canlı axtarış sahəsi
- Ayrıca jurnal səhifəsi — yazılar Mədəniyyət, Bələdçi və Stil kateqoriyalarına görə süzülür
- Ayrıca mağaza, əlaqə və tez-tez verilən suallar səhifələri
- Parallax ilə açılan brend mənşəyi hekayəsi
- Admin panel: məhsul və kolleksiyaların əlavəsi, redaktəsi, silinməsi
- Admin paneldən jurnal yazılarının yazılması və dərci
- Saytdan gələn müraciət və sifarişlərin panel daxilində siyahılanması
- Məhsul və jurnal şəkillərinin birbaşa paneldən yüklənməsi
- JWT ilə qorunan admin girişi — panel marşrutları middleware səviyyəsində bağlıdır
- Frontend
- Next.js App Router. Hər dil (AZ / EN / RU) öz marşrutundadır; vitrin, mağaza, jurnal, əlaqə və FAQ səhifələri server tərəfdə render olunur. Şəkillər `next/image` ilə ölçülür, brend mənşəyi parallax ilə açılır, başlıqda canlı axtarış işləyir.
- Backend
- Ayrıca API serveri yoxdur — backend eyni Next.js tətbiqinin route handler-ləridir. Məhsul, kolleksiya, jurnal və müraciət əməliyyatları bu marşrutlardan keçir. Frontend ilə backend eyni TypeScript tiplərini bölüşür, yəni sahə adı dəyişəndə səhv build zamanı üzə çıxır — istifadəçi onu görməmişdən əvvəl.
- Məlumat bazası
- Prisma + SQLite. Sxem `schema.prisma` faylında tərif olunur və dəyişikliklər migrasiya ilə gedir; baza isə serverin öz diskində tək fayl kimi yaşayır. Məhsullar, kolleksiyalar, jurnal yazıları və müraciətlər eyni sxemin içindədir.
- Autentifikasiya
- Öz JWT axını: giriş uğurlu olanda token serverdə imzalanır və `httpOnly` cookie-yə yazılır. `/admin` altındakı marşrutlar həm middleware səviyyəsində, həm də hər route handler-in içində yoxlanılır.
- Media
- Məhsul və jurnal şəkilləri admin paneldən yüklənir və VPS-in diskinə yazılır; saytda `next/image` üzərindən ekran ölçüsünə uyğun formada verilir.
- İnfrastruktur
- VPS üzərində Next.js prosesi PM2 ilə saxlanılır — yenidən başlatma və çökmə halında qaldırma onun üzərindədir. Qarşıda Nginx reverse proxy dayanır: SSL, sıxılma və statik faylların keşi orada həll olunur.
Niyə Next.js?
Zərgərlik saytı şəkil ağırlıqlıdır, üç dildə işləyir və eyni zamanda öz idarəetmə panelinə ehtiyac duyur. Next.js bu üçünü tək tətbiqdə birləşdirir: səhifələr server tərəfdə hazır HTML kimi verilir, admin marşrutları isə eyni layihənin içində yaşayır. Klassik SPA və ayrıca API quruluşunda eyni iş iki repo, iki deploy və iki dəfə təkrarlanan tip tərifi demək olardı.
Şəkillərin optimallaşdırılması
Məhsul fotoları saytın ən ağır hissəsidir. `next/image` ilə hər şəkil ekran ölçüsünə uyğun ölçüdə və müasir formatda (WebP) verilir — beləliklə mobil istifadəçi desktop ölçülü şəkil yükləmir. Lüks brenddə foto keyfiyyəti aşağı salına bilməz, ona görə qazanc keyfiyyətdən deyil, ölçüdən çıxarılır.
Üç dil ayrıca marşrutda, hreflang ilə bir-birinə bağlı
Hər dil öz ünvanında yaşayır, yəni axtarış sistemləri üç ayrı səhifə indeksləyir — bu, brendin həm azərbaycandilli, həm rusdilli müştəriyə çatması üçün vacibdir. Amma ayrı ünvan tək başına azdır: sistem bu üç səhifənin eyni məzmunun tərcüməsi olduğunu da bilməlidir. Ona görə hər səhifədə hreflang bağlantıları və x-default göstəricisi var. Bunsuz üç dil bir-birinin rəqibi kimi indeksləşir və brend faktiki olaraq öz-özü ilə yarışır.
Struktur data brendi maşına izah edir
Səhifədə dörd ayrıca JSON-LD bloku var. Bu, axtarış sisteminə və AI modellərinə brendin nə satdığını, harada yerləşdiyini və hansı yazıları dərc etdiyini təxmin etdirmir — birbaşa deyir. Lüks brend üçün bu xüsusilə vacibdir, çünki axtarış nəticəsində çıxan qısa təsvir çox vaxt müştərinin brendlə ilk təması olur.
Jurnal satış kanalının bir hissəsidir
Kəlağayı mədəniyyəti oxuyan, brilyant seçmə bələdçisi axtaran və gündəlik stil məsləhəti istəyən üç fərqli adamdır. Yazılar məhz bu üç kateqoriyaya bölünüb, çünki hər biri fərqli axtarışdan gəlir və fərqli kolleksiyaya aparır. Jurnal burada məzmun bölməsi deyil, mağaza səhifələrinə açılan giriş qapısıdır.
Niyə SQLite seçildi, Postgres yox?
Harmal-ın data profili konkretdir: yüzlərlə məhsul və jurnal yazısı, gündə bir neçə yazma əməliyyatı, bunun qarşısında minlərlə oxunuş. Bu profildə SQLite eyni maşında, şəbəkə gedişi olmadan oxuyur — sorğu üçün ayrıca baza serverinə müraciət yoxdur. Postgres burada nə sürət qazandırardı, nə də yeni funksiya verərdi: yalnız ayrıca proses, ayrıca yaddaş və ayrıca nasazlıq nöqtəsi əlavə edərdi. Prisma sxemi isə yerindədir — mağaza böyüyüb eyni anda çoxlu yazma tələb edəndə baza dəyişikliyi bir neçə sətirlik migrasiyadır. Texnologiyanı bugünkü yükə görə seçmək, sabahkı ehtimal üçün əvvəlcədən ödəməkdən ucuzdur.
Panel olmasa, sayt üç aya köhnəlir
Mövsüm dəyişəndə kolleksiya dəyişir, qızıl bahalaşanda qiymət yenilənir, jurnala yazı düşür. Bu dəyişiklikləri kodda etmək o deməkdir ki, brend hər dəfə developerin boş vaxtını gözləyir — praktikada isə gözləmir, sadəcə saytı yeniləməkdən əl çəkir və vitrin keçmiş mövsümdə donub qalır. Ona görə məhsul, kolleksiya və jurnal admin paneldən idarə olunur: brend öz vitrinini özü saxlayır, mən yalnız sistemi saxlayıram.
Giriş tokeni httpOnly cookie-də saxlanılır
Admin paneli brendin bütün məhsul bazasına və müştəri müraciətlərinə açılan qapıdır. Token `localStorage`-da saxlanılsaydı, saytdakı istənilən XSS boşluğu onu oxuya bilərdi. `httpOnly` cookie JavaScript üçün görünmür, `SameSite` isə tokenin başqa saytdan göndərilən sorğuya qoşulmasının qarşısını alır. Yoxlama isə yalnız middleware-də deyil, hər route handler-in öz içindədir: interfeysi gizlətmək qorunma deyil, sadəcə görünüşdür — API ünvanını bilən adam interfeysi heç görmür.
Niyə Vercel yox, öz VPS-i?
Bu layihənin iki hissəsi davamlı diskə söykənir: SQLite faylı və admindən yüklənən məhsul şəkilləri. Serverless mühitdə fayl sistemi müvəqqətidir — yazılan fayl növbəti deploy-a, çox vaxt isə növbəti sorğuya qədər yaşayır. Yəni Vercel seçilsəydi, həm baza, həm də şəkil saxlama üçün ayrıca ödənişli xidmət qoşulmalı olardı. VPS-də hər ikisi elə tətbiqin yanındadır. Yəni SQLite, disk üzərində şəkil saxlama və VPS bir-birindən asılı olmayan üç qərar deyil — eyni qərarın üç üzüdür.
PM2 və Nginx işi bölür
Next.js-in server prosesi tək başına yaşamağı bacarmır: çökəndə qalxmalı, server yenidən başlayanda özü işə düşməlidir — bunu PM2 edir. Nginx isə qarşıda dayanıb ona aid olmayan işi öz üzərinə götürür: SSL sonlandırması, sıxılma, statik faylların keşi. Bu bölgü olmadan həmin proses həm tətbiqi işlətməli, həm də hər sorğuda şifrələmə ilə məşğul olmalı olardı — yəni məhsul səhifəsi sertifikat əməliyyatının arxasında növbə gözləyərdi.
Sayt 2026-cı ilin avqustundan üç dildə canlıdır. PageSpeed Insights ölçməsində performans həm mobildə, həm masaüstündə 93, SEO isə 100 baldır — məhsul fotoları ilə dolu bir vitrin üçün bu, şəkillərin ölçülməsinin və statik generasiyanın işlədiyini göstərir. Gündəlik məzmun brendin öz əlindədir: məhsul, kolleksiya, qiymət və jurnal yazıları admin paneldən dəyişir, adi yeniləmə üçün developer müdaxiləsi lazım gəlmir.
- Harmal hazır platforma (Shopify, WooCommerce) üzərində qurulub?
- Xeyr. Sayt sıfırdan Next.js və TypeScript ilə yazılıb — öz məlumat bazası (Prisma + SQLite), öz backend marşrutları və öz admin paneli ilə. Aylıq abunə haqqı, tema məhdudiyyəti və ya plagin asılılığı yoxdur.
- Məhsulları və jurnal yazılarını kim əlavə edir?
- Brendin özü. Məhsul, kolleksiya və jurnal yazıları admin paneldən əlavə olunur, redaktə edilir və silinir; şəkillər də birbaşa paneldən yüklənir. Adi məzmun dəyişikliyi üçün developer müdaxiləsi lazım deyil.
- Saytın backend hissəsini kim yazıb?
- Layihənin bütün qatları — frontend, Next.js route handler-ləri, Prisma məlumat modeli, admin paneli, autentifikasiya və serverdə deploy — Nurlan Qadirov tərəfindən yazılıb. Harmal həm frontend, həm də full-stack iş nümunəsidir.
- Sayt neçə dildə işləyir?
- Üç dildə: azərbaycan, ingilis və rus. Hər dil ayrıca ünvanda yaşayır və hreflang ilə digərlərinə bağlanır, yəni üçü də axtarış sistemləri üçün müstəqil səhifədir.
- Sayt harada yerləşdirilib?
- Öz VPS-ində. Next.js prosesi PM2 ilə saxlanılır, qarşıda Nginx reverse proxy dayanır. Bu seçim SQLite bazasının və admindən yüklənən şəkillərin davamlı diskdə qalması üçündür.
Layihənizi danışaq — adətən eyni gün cavab verirəm.
Nurlan Qadirov — Baku, Azerbaijan