Next.js'ten Statik Çıktı Almanın Püf Noktaları: Zayıf Hosting'de Bile Yüksek Performans

Plan:

İhtiyaç olmayan paketleri build aşamasından at.

• `next.config.js` içinde `output: "export"` ve `images.unoptimized = true` ayarlarının doğru olduğundan emin ol.
• Üçüncü parti bileşenleri sadece gerekli sayfalara `dynamic(() => import(...), { ssr: false })` ile yükle.
• `analyze` scriptiyle Webpack bundle raporu çıkar; görsel veya ikon paketlerinde Tree Shaking uygulanmayan dosyaları kaldır.

Plan:

Zayıf hostingde CDN yoksa kendin hafif bir cache katmanı kur.

• Statik export sonrası dosyaları `public` klasörüyle aynı dizinde sakla ve `.htaccess` içine `Cache-Control: max-age=31536000` gibi uzun süreli kurallar yaz.
• HTML dosyalarında ise `stale-while-revalidate=60` gibi düşük TTL tanımlayarak güncelleme alanlarına esneklik bırak.
• Eğer hosting gzip destekliyorsa `mod_deflate` veya `brotli` modüllerini aktif et.

Plan:

Görsel ağırlığını minimuma indir.

• Export öncesi tüm görselleri `sharp` veya `squoosh` ile webp/avif formatına dönüştür.
• Tailwind sınıflarıyla responsive `background-image` yerine CSS gradient kullanmaya odaklan; böylece asset yükü azalır.
• Büyük görselleri `loading="lazy"` ve `decoding="async"` ile destekle, hero dışında hiçbir görseli `priority` yapma.

Plan:

Her deploy öncesi aynı kaliteyi yakalamak için script yaz.

• `package.json` içinde `preexport` scriptiyle lint, type-check ve Lighthouse CLI skor kontrolü yap.
• Başarılı sonuç alınca `next export` komutunu çalıştır, çıktıyı `out/` klasöründe topluca versiyonla.
• Geliştiricilere uyarı göndermek için GitHub Actions veya simple bash hook ile başarısız run’larda Slack/webhook bildirimi ver.

Plan:

Zayıf sunucuda bile neler olduğunu bil.

• Apache veya Nginx access loglarını haftalık olarak sıkıştırıp sakla; en çok istek alan dosyaları belirle.
• Basit bir `cron` job ile `curl -w "%{time_total}"` komutunu kritik sayfalar için çalıştır, sonuçları Google Sheet’e yaz.
• Sunucu kaynak kullanımını `htop` ya da hosting panelindeki grafiklerle kontrol et; CPU tepe noktalarında hangi sayfanın tetiklendiğini loglarla eşleştir.

Plan:

Export sonrası gerçek cihazlarda test yap.

• 3G bağlantı emülasyonu ile Chrome DevTools üzerinden FID ve TBT değerlerine bak.
• İlk yüklemede animasyonları geciktirmek için `prefers-reduced-motion` medyasını kontrol et.
• Lighthouse raporunu PDF olarak kaydedip her deploy klasörüne koy; böylece ilerlemeyi geriye dönük izleyebilirsin.