We're preparing your content...

FullStack Engineering13 Ekim 2026

Next.js Uygulaman Neden Yavaş? (Ve Bunu Nasıl Çözersin?)

Next.js projelerindeki performans sorunlarını keşfet ve Core Web Vitals skorlarını iyileştirmek için pratik optimizasyon tekniklerini öğren.

Next.js kutudan çıktığı gibi harika araçlar sunar ancak uygulamanızı otomatik olarak hızlı yapmaz. Eğer Lighthouse skorlarınız düşüyorsa veya kullanıcılar sayfada kaymalar (layout shift) yaşıyorsa, bazı yaygın performans tuzaklarına düşüyor olabilirsiniz.

Bu yazıda, Next.js projelerini yavaşlatan en büyük 4 nedeni ve modern App Router özellikleri ile bunları nasıl çözeceğinizi inceliyoruz.

1. Aşırı Kullanılan Client Component'ler (`"use client"`)

Modern Next.js uygulamalarındaki 1 numaralı performans katili, sırf hook veya event listener kullanabilmek için her dosyanın en başına "use client" yazmaktır.

❌ Yapılan Hata:

Tüm sayfa ağacını Client Component haline getirmek; bu durum JavaScript paket (bundle) boyutunu büyütür ve tüm render yükünü kullanıcının tarayıcısına yıkar.

✅ Doğru Yaklaşım:

Bileşenlerinizi varsayılan olarak Server Component olarak tutun. "use client" direktifini bileşen ağacının olabildiğince derinine — yalnızca etkileşimli yapraklara (butonlar, inputlar, açılır menüler) taşıyın.

2. Optimize Edilmemiş Görseller ve Eksik Ölçüler

Görseller web üzerindeki indirilen baytların çoğunluğunu oluşturur. Standart HTML <img> etiketleri veya yanlış yapılandırılmış next/image bileşenleri LCP (Largest Contentful Paint) skorunuzu mahveder.

❌ Yapılan Hata:

Devasa, sıkıştırılmamış PNG'ler yüklemek veya açık width ve height değerleri vermemek.

✅ Doğru Yaklaşım:

Her zaman Next.js'in yerleşik <Image /> bileşenini kullanın, doğru sizes prop'unu verin ve Sanity'nin görsel altyapısının modern WebP/AVIF formatları sunmasına izin verin.

3. Önbelleğe Alınmayan İstekler ve Network Waterfalls

Bileşenler içinde ardışık (sequential) veri çekmek, tarayıcının İstek A bittikten sonra İstek B'ye başlamasını beklediği ağ tıkanıklıklarına (waterfall) yol açar.

❌ Yapılan Hata:

Tek bir bileşen içinde paralel hale getirilmemiş çok sayıda bağımlı await fetch() çağrısı yapmak.

✅ Doğru Yaklaşım:

Bağımsız veri akışlarını aynı anda tetiklemek için JavaScript'in Promise.all() metodunu kullanın:

async function getData(postId: string) {
  const [postData, commentsData] = await Promise.all([
    fetch(`[https://api.example.com/posts/$](https://api.example.com/posts/$){postId}`),
    fetch(`[https://api.example.com/posts/$](https://api.example.com/posts/$){postId}/comments`),
  ]);

  return {
    post: await postData.json(),
    comments: await commentsData.json(),
  };
}

4. Ağır Üçüncü Taraf Script'ler

Google Analytics, canlı destek widget'ları veya takip script'lerini strateji yönetimi olmadan doğrudan layout içine gömmek ana iş parçacığını (main thread) bloke eder.

❌ Yapılan Hata:

Ham <script src="..."> etiketleri kullanmak.

✅ Doğru Yaklaşım:

Next.js <Script> bileşenini uygun yükleme stratejileriyle (strategy="lazyOnload") kullanın.

💡 Şimşek Gibi Hızlı Bir Next.js İçin Son Kontrol Listesi

@next/bundle-analyzer kullanarak paket boyutunuzu denetleyin.
Veri çekme işlemlerini verinin kullanılacağı yere olabildiğince yaklaştırın.
Arayüzü parça parça akıtmak (streaming) için Suspense sınırlarını stratejik kullanın.
Sunucu mantığını sunucuda bırakın.

Next.js Uygulaman Neden Yavaş? (Ve Bunu Nasıl Çözersin?)

FullStack Engineering13 Ekim 2026

Next.js Uygulaman Neden Yavaş? (Ve Bunu Nasıl Çözersin?)

Next.js projelerindeki performans sorunlarını keşfet ve Core Web Vitals skorlarını iyileştirmek için pratik optimizasyon tekniklerini öğren.

Bu yazıda, Next.js projelerini yavaşlatan en büyük 4 nedeni ve modern App Router özellikleri ile bunları nasıl çözeceğinizi inceliyoruz.

1. Aşırı Kullanılan Client Component'ler (`"use client"`)

Modern Next.js uygulamalarındaki 1 numaralı performans katili, sırf hook veya event listener kullanabilmek için her dosyanın en başına "use client" yazmaktır.

❌ Yapılan Hata:

Tüm sayfa ağacını Client Component haline getirmek; bu durum JavaScript paket (bundle) boyutunu büyütür ve tüm render yükünü kullanıcının tarayıcısına yıkar.

✅ Doğru Yaklaşım:

2. Optimize Edilmemiş Görseller ve Eksik Ölçüler

❌ Yapılan Hata:

Devasa, sıkıştırılmamış PNG'ler yüklemek veya açık width ve height değerleri vermemek.

✅ Doğru Yaklaşım:

Her zaman Next.js'in yerleşik <Image /> bileşenini kullanın, doğru sizes prop'unu verin ve Sanity'nin görsel altyapısının modern WebP/AVIF formatları sunmasına izin verin.

3. Önbelleğe Alınmayan İstekler ve Network Waterfalls

Bileşenler içinde ardışık (sequential) veri çekmek, tarayıcının İstek A bittikten sonra İstek B'ye başlamasını beklediği ağ tıkanıklıklarına (waterfall) yol açar.

❌ Yapılan Hata:

Tek bir bileşen içinde paralel hale getirilmemiş çok sayıda bağımlı await fetch() çağrısı yapmak.

✅ Doğru Yaklaşım:

Bağımsız veri akışlarını aynı anda tetiklemek için JavaScript'in Promise.all() metodunu kullanın:

async function getData(postId: string) {
  const [postData, commentsData] = await Promise.all([
    fetch(`[https://api.example.com/posts/$](https://api.example.com/posts/$){postId}`),
    fetch(`[https://api.example.com/posts/$](https://api.example.com/posts/$){postId}/comments`),
  ]);

  return {
    post: await postData.json(),
    comments: await commentsData.json(),
  };
}

4. Ağır Üçüncü Taraf Script'ler

Google Analytics, canlı destek widget'ları veya takip script'lerini strateji yönetimi olmadan doğrudan layout içine gömmek ana iş parçacığını (main thread) bloke eder.

❌ Yapılan Hata:

Ham <script src="..."> etiketleri kullanmak.

✅ Doğru Yaklaşım:

Next.js <Script> bileşenini uygun yükleme stratejileriyle (strategy="lazyOnload") kullanın.

💡 Şimşek Gibi Hızlı Bir Next.js İçin Son Kontrol Listesi

@next/bundle-analyzer kullanarak paket boyutunuzu denetleyin.
Veri çekme işlemlerini verinin kullanılacağı yere olabildiğince yaklaştırın.
Arayüzü parça parça akıtmak (streaming) için Suspense sınırlarını stratejik kullanın.
Sunucu mantığını sunucuda bırakın.

Next.js Uygulaman Neden Yavaş? (Ve Bunu Nasıl Çözersin?)

1. Aşırı Kullanılan Client Component'ler ("use client")

❌ Yapılan Hata:

✅ Doğru Yaklaşım:

2. Optimize Edilmemiş Görseller ve Eksik Ölçüler

❌ Yapılan Hata:

✅ Doğru Yaklaşım:

3. Önbelleğe Alınmayan İstekler ve Network Waterfalls

❌ Yapılan Hata:

✅ Doğru Yaklaşım:

4. Ağır Üçüncü Taraf Script'ler

❌ Yapılan Hata:

✅ Doğru Yaklaşım:

💡 Şimşek Gibi Hızlı Bir Next.js İçin Son Kontrol Listesi

Next.js Uygulaman Neden Yavaş? (Ve Bunu Nasıl Çözersin?)

1. Aşırı Kullanılan Client Component'ler ("use client")

❌ Yapılan Hata:

✅ Doğru Yaklaşım:

2. Optimize Edilmemiş Görseller ve Eksik Ölçüler

❌ Yapılan Hata:

✅ Doğru Yaklaşım:

3. Önbelleğe Alınmayan İstekler ve Network Waterfalls

❌ Yapılan Hata:

✅ Doğru Yaklaşım:

4. Ağır Üçüncü Taraf Script'ler

❌ Yapılan Hata:

✅ Doğru Yaklaşım:

💡 Şimşek Gibi Hızlı Bir Next.js İçin Son Kontrol Listesi

1. Aşırı Kullanılan Client Component'ler (`"use client"`)

1. Aşırı Kullanılan Client Component'ler (`"use client"`)