Next.js ile Performanslı Web Uygulamaları

Modern web uygulamalarında performans artık bir lüks değil, zorunluluk. Next.js bu konuda en güçlü araçları sunuyor.

Neden Next.js?

Next.js, React ekosisteminin en popüler full-stack framework'ü. İşte tercih nedenlerimiz:

• Server Components: Sunucu tarafında render ile daha az JavaScript
• App Router: Dosya tabanlı, esnek yönlendirme sistemi
• Streaming SSR: Sayfanın parça parça yüklenmesi
• Built-in Optimizasyon: Image, Font ve Script optimizasyonu

Performans İpuçları

1. Server Components Kullanın

Varsayılan olarak Server Component kullanın. Client Component sadece interaktivite gerektiğinde:

// Server Component (varsayılan)
async function ProductList() {
  const products = await db.products.findMany();
  return (
    

      {products.map(p => )}
    
  );
}

2. Image Optimization

Next.js Image bileşeni otomatik optimizasyon sağlar:

import Image from 'next/image';

3. Dynamic Imports

Ağır bileşenleri lazy load edin:

const HeavyChart = dynamic(() => import('./Chart'), {
  loading: () => ,
  ssr: false,
});

4. Caching Stratejileri

// ISR: Her 60 saniyede yeniden oluştur
export const revalidate = 60;
// On-demand revalidation
revalidatePath('/products');

Core Web Vitals

Hedef değerler:

• LCP (Largest Contentful Paint): < 2.5s
• FID (First Input Delay): < 100ms
• CLS (Cumulative Layout Shift): < 0.1

Sonuç

Next.js doğru kullanıldığında Lighthouse 90+ skorları elde etmek mümkün. Devello'da tüm projelerimizde bu yaklaşımları uyguluyoruz.