full-stack / case.study
geliştiriliyorZeki Dekorasyon: Performans Odaklı Dijital Katalog
Next.js mimarisiyle inşa edilmiş, yüksek çözünürlüklü görselleri milisaniyeler içinde sunan SEO uyumlu bahçe mobilyaları vitrini.
15 Şubat 2026
product.screens
Uygulama içi görünümler
Canlı demo yerine ürünün gerçek yüzeyleri — akış, arayüz ve mühendislik kararları burada okunur.
screenshots.coming
Zeki Dekorasyon: Performans Odaklı Dijital Katalog için 3–4 uygulama ekranı eklenecek. Şimdilik vaka çalışması metni ve P/D/I kartları ana kanıt.
architecture.decisions
Problem → karar → etki
problem
Çözülen problem
Bahçe mobilyaları gibi görsel odaklı bir sektörde, yüksek çözünürlüklü ürün fotoğraflarının LCP performansını düşürmesi, katalog akışını yavaşlatması ve SEO görünürlüğünü zayıflatması.
decision
Mühendislik kararı
Geleneksel SPA yerine Next.js SSG, dosya tabanlı ürün modeli ve `next/image` optimizasyonu seçildi; böylece hızlı ilk yükleme, düşük bakım maliyeti ve ürün sayısı arttığında ölçeklenebilir katalog yapısı hedeflendi.
impact
Kanıtlanan etki
Proje geliştirme aşamasında; hedef çıktı sıfıra yakın CLS, hızlı görsel katalog deneyimi ve küçük işletme için ölçülebilir organik görünürlük artışı.
Görsel ağırlıklı bir sektör olan bahçe ve dış mekan mobilyalarında, müşterinin satın alma kararını doğrudan fotoğrafların kalitesi ve sitenin hızı belirler. Zeki Dekorasyon için geliştirdiğim dijital ürün kataloğunda temel mühendislik hedefim; yüksek çözünürlüklü ürün görsellerinden taviz vermeden, kullanıcıya anında tepki veren (instant-loading) bir arayüz sunmaktı.
Müşterinin mevcut hantal yapısını, modern web teknolojileriyle baştan aşağı yeniden kurguladım.
Mimari Kararlar ve Performans Optimizasyonu
Bir e-ticaret veya katalog sitesini yavaşlatan en büyük unsur istemci tarafında (client-side) yapılan ağır veri çekme işlemleri ve optimize edilmemiş fotoğraflardır. Bu darboğazı aşmak için şu mimari adımları izledim:
- Static Site Generation (SSG) ile Ön Derleme: Ürün sayfalarını her kullanıcı girdiğinde veritabanından çekmek yerine, build (derleme) aşamasında Next.js ile statik HTML dosyalarına dönüştürdüm. Bu sayede sunucu yanıt süresi (TTFB) milisaniyeler seviyesine indi.
- Gelişmiş Görsel Yönetimi: Sitedeki tüm ürün karelerini
next/imagebileşeni ile entegre ettim. Bu sayede görseller, kullanıcının cihazına ve ekran çözünürlüğüne göre otomatik olarak boyutlandırıldı (srcset), WebP formatına çevrildi ve sadece ekranda göründüklerinde yüklenecek (lazy-loading) şekilde optimize edildi. - Layout Shift (Düzen Kayması) Koruması: Fotoğrafların yüklenme esnasında metinleri aşağı iterek kötü bir deneyim yaratmasını önlemek için, görsellerin en-boy oranlarını (aspect ratio) önceden belirleyerek sayfa iskeletini sabitledim.
Darboğazlar ve Teknik Çözümler
Geliştirme sürecinde, ürün dizin yapılarının (directory structures) büyümesiyle birlikte build hatalarıyla karşılaştım. Özellikle dinamik sayfa yollarının (dynamic routes) oluşturulmasında veri bütünlüğünü sağlamak gerekiyordu.
Veri katmanını ve dosya dizinlerini modüler bir yapıya ayırarak, Next.js'in generateStaticParams metodunu ürün ID'leri ve kategori slug'ları ile tam uyumlu çalışacak şekilde yeniden düzenledim. Bu refactor işlemi, projenin sadece daha hızlı çalışmasını değil, gelecekte eklenecek yüzlerce yeni ürün için de kusursuz bir şekilde ölçeklenebilmesini (scalability) sağladı.
Sonuç
Zeki Dekorasyon projesi; doğru teknoloji seçiminin (Next.js) ve detaylı performans optimizasyonunun, ticari bir işletmenin dijital varlığını nasıl dönüştürebileceğini gösteren güçlü bir vaka analizi oldu.