Next.js ile Ücretsiz Brat Stili Resim Üreticisi Geliştirirken Öğrendiklerim

Geçtiğimiz haftalarda Charli XCX'in albüm estetiğinden ilham alan ücretsiz bir brat stili görsel üreticisi geliştirdim. Basit bir arayüzün arkasında yatan performans sorunları ve çözümlerini keşfetmek, projeyi beklediğimden çok daha ilginç hale getirdi. ibratgenerator.com adıyla yayınlanan araç, kullanıcıların herhangi bir metni yüksek çözünürlüklü PNG formatında indirebildiği, kaydolma gerektirmeyen bir platform olarak hizmet veriyor. Peki bu basit görünümlü aracın arkasında ne gibi teknik zorluklar ve öğrenmeler yatıyor?

Neden Basit Bir Tasarım Performans Sorunlarına Yol Açtı?

Brat estetiği, koyu renkli arka planlar ve kalın küçük harflerle tanımlanan minimal bir tasarım anlayışına sahip. Bu basitlik, aracın kullanımını kolaylaştırırken, geliştirme sürecinde karşılaştığım performans engellerini de ortaya çıkardı. Üç temel bileşen üzerinde durmak gerekiyor:

• Next.js Dynamic Import Problem: Uygulama, tarayıcı API'lerini doğrudan kullanan bir canvas bileşeni içeriyor. Bu bileşen sunucu tarafında çalıştırılamadığı için next/dynamic kullanılarak istemci tarafında yükleniyor. Ancak Google'ın masaüstü tarayıcılarında sayfayı tararken karşılaştığı boşluk sorunu, dinamik yüklemenin getirdiği bir yan etkiydi. Sayfanın yerleşim düzeninin kayması, LCP (Largest Contentful Paint) süresini olumsuz etkiliyordu.

Çözüm oldukça basit oldu. Bileşenin yerleşimini sabitleyen bir wrapper div ekleyerek sorunu ortadan kaldırdık:

  <div style={{ minHeight: '520px', position: 'relative', width: '100%' }}>
    <BratGeneratorLazy />
  </div>

Bu değişiklik, Google Search Console'da sayfa konumunun önemli ölçüde iyileşmesine yol açtı. Özellikle position: relative ve width: 100% özellikleri, bileşenin kayan başlıklarla etkileşimini engelleyerek kullanıcı deneyimini doğrudan iyileştirdi.

Canvas Performansında Kritik Optimizasyonlar

Araç, kullanıcıların her adımını kaydedebilen bir geri alma/yineleme (undo/redo) sistemine sahip. Başlangıçta, her kullanıcı etkileşiminde arka plan görüntüsünü kopyalamak için gereksiz DOM işlemleri gerçekleştiriliyordu. Bu yaklaşım, özellikle mobil cihazlarda performans kaybına ve arayüzün takılmasına neden oluyordu.

// Eski hata: Her etkileşimde yeni bir Image nesnesi oluşturuluyor
const img = new Image();
img.src = s.bgImage!.src;

Sorunun çözümü, görüntü nesnesine doğrudan referans atamak oldu. Böylece her etkileşimde gereksiz DOM manipülasyonlarından kaçınılmış ve bellek yönetimi optimize edilmiş oldu:

// Yeni çözüm: Statik referans ataması
bgImage: s.bgImage,

Bu basit değişiklik, özellikle mobil cihazlardaki kullanıcı arayüzü tepkilerinde gözle görülür bir iyileşme sağladı.

Fare Olayları Yönetiminde Kritik Detay

Bileşen, yapıştırıcıların sürüklenmesi için pointermove, pointerup ve pointercancel olaylarına global dinleyiciler ekliyordu. React StrictMode geliştirme modunda bileşenleri iki kez monte ettiği için, olay dinleyicilerinin temizlenmemesi durumunda çift tetiklemeler meydana geliyordu. Bu da kullanıcıların sürükleme işlemlerini tamamladıklarında oluşan hatalara yol açıyordu.

// Doğru yaklaşım: Yeni dinleyici eklemeden önce temizle
window.removeEventListener("pointermove", onPointerMove);
window.removeEventListener("pointerup", onPointerUp);
window.removeEventListener("pointercancel", onPointerUp);

window.addEventListener("pointermove", onPointerMove);
window.addEventListener("pointerup", onPointerUp);
window.addEventListener("pointercancel", onPointerUp);

Bu basit ama kritik adım, olay yönetimini stabilize etti ve kullanıcı arayüzündeki tutarsızlıkları ortadan kaldırdı.

Content Security Policy (CSP) Hatalarından Dersler

Next.js uygulamasına CSP başlıkları eklemek, Microsoft Clarity izleme aracının çalışmasını engelledi. Clarity, verileri t.clarity.ms adresine gönderirken komut dosyaları scripts.clarity.ms üzerinden yükleniyordu. Bu durumda, CSP kurallarında her iki alt alan adının da açıkça belirtilmesi gerekiyordu.

// CSP kuralları
script-src: scripts.clarity.ms
connect-src: t.clarity.ms

Bu deneyim, CSP başlıkları eklerken tarayıcı konsolunda gerçekleşen ağ isteklerini incelemenin önemini bir kez daha gösterdi. Engellenen her alan adı, konsolda doğrudan hata mesajı olarak karşımıza çıkıyordu.

Gelecekteki Geliştirme Planları

Projenin başında çok dilli yönlendirme sistemi eklemek için /[lang]/ dinamik segmentini kullanmıştım. Ancak daha sonra bu rotaları kaldırdığımda, TypeScript derleme hatalarıyla karşılaştım. .next/cache klasöründeki eski tür tanımları, silinmiş olan rotalara referans vermeye devam ediyordu. Basit bir çözümle sorunu giderdim:

rm -rf .next
npm run dev

Yapısal yönlendirme değişikliklerinde önbelleği temizlemenin önemini bu deneyimle bir kez daha öğrendim.

Sonuç: Basitlik ve Performansın Dengesi

ibratgenerator.com artık kullanıcıların herhangi bir metni kaliteli PNG formatında indirebildiği, watermarksız ve kaydolma gerektirmeyen bir araç olarak hizmet veriyor. Mobil ve masaüstü cihazlarda sorunsuz çalışan uygulama, Next.js ve TypeScript'in canvas API'leriyle nasıl optimize edilebileceğine dair önemli örneklerden biri haline geldi.

Eğer siz de Next.js ile canvas tabanlı araçlar geliştiriyorsanız, dinamik import ve yerleşim sabitleme tekniklerini kullanmak, performans ve kullanıcı deneyimini doğrudan iyileştirecektir. Tek bir wrapper div eklemenin LCP üzerinde ne kadar büyük bir etkisi olduğunu görmek, bu optimizasyonların önemini bir kez daha vurguluyor. Geliştirme sürecinde karşılaşacağınız teknik zorluklar, basitlik ve performans arasındaki dengeyi kurmanın anahtarı olacaktır.