Next.js ile geliştirdiğiniz web sitelerinin performansını artırmak ve Google'ın Core Web Vitals metriklerini yeşile çekmek için bu kapsamlı rehberi hazırladık. SSR, ISR ve Edge stratejilerinden resim optimizasyonuna kadar tüm kritik noktaları ele alıyoruz.

Core Web Vitals Nedir?

Core Web Vitals, Google'ın web sayfalarının kullanıcı deneyimini ölçmek için kullandığı üç temel metrikten oluşur:

• LCP (Largest Contentful Paint): Sayfanın ana içeriğinin yüklenme süresi (2.5 saniyeden az olmalı)
• FID (First Input Delay): Kullanıcının ilk etkileşimine yanıt verme süresi (100 milisaniyeden az olmalı)
• CLS (Cumulative Layout Shift): Sayfa yüklenirken oluşan görsel kaymalar (0.1'den az olmalı)

Next.js Render Stratejileri

SSR (Server-Side Rendering)

Server-Side Rendering, her istekte sunucuda HTML oluşturur. Dinamik içerikler ve SEO için idealdir.

// pages/products/[id].js veya app/products/[id]/page.tsx
export async function getServerSideProps(context) {
  const product = await fetchProduct(context.params.id);
  return { props: { product } };
}

ISR (Incremental Static Regeneration)

ISR, statik sayfaları belirli aralıklarla yeniden oluşturur. Hem performans hem de güncellik sağlar.

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 3600 // Her saat yeniden oluştur
  };
}

Edge Runtime

Edge Runtime, kodunuzu CDN edge lokasyonlarında çalıştırır. Düşük gecikme ve yüksek performans sağlar.

export const runtime = 'edge';

export async function GET(request) {
  return new Response('Hello from Edge!');
}

Resim Optimizasyonu

Next.js Image component'i otomatik olarak resimleri optimize eder, ancak doğru kullanım kritiktir:

• priority prop'unu LCP resimleri için kullanın
• width ve height değerlerini her zaman belirtin
• loading="lazy" ile görünür alan dışındaki resimleri geciktirin
• WebP veya AVIF formatlarını tercih edin

Önbellekleme Stratejileri

Next.js, çeşitli önbellekleme katmanları sunar:

• Full Route Cache: Statik sayfalar için
• Data Cache: fetch() istekleri için
• Request Memoization: Aynı render içinde tekrarlanan istekler için

Performans İpuçları

1. Gereksiz JavaScript bundle'larını kaldırın
2. Dynamic imports ile code splitting yapın
3. Font optimizasyonu için next/font kullanın
4. Third-party script'leri optimize edin
5. API route'larınızı optimize edin

Sonuç

Next.js performans optimizasyonu, doğru render stratejisi seçimi, resim optimizasyonu ve önbellekleme teknikleriyle Core Web Vitals metriklerinizi yeşile çekebilirsiniz. Bu rehberdeki teknikleri uygulayarak kullanıcı deneyimini önemli ölçüde iyileştirebilirsiniz.

İş süreçlerinizi otomatikleştirmek için n8n otomasyon rehberimizi inceleyebilir, frontend animasyon teknikleri için GSAP rehberimizi okuyabilirsiniz.