React + Next.js: Modern Frontend Geliştirme Rehberi 2026

React, frontend ekosistemi 2026'da hâlâ pazar lideri (npm haftalık 25M+ indirme). Next.js ise React üzerinde kurumsal web standardı oldu. Server Components ile yeni mimari, App Router ile yeni iş akışı.

React vs Next.js — fark

React

Sadece UI kütüphanesi. Routing, SSR, data fetching dahil değil.

Next.js

React + routing + SSR + ISR + API routes + image optimization + edge runtime. Full framework.

Next.js 14+ — App Router devrim

Pages Router (eski) yerine App Router (yeni standard). app/ klasörü içinde dosya bazlı routing, layout nesting, server components varsayılan. Migration zor ama yeni projelerde tek tercih.

React Server Components (RSC)

Component'ler sunucuda render edilir, JS bundle'a girmez. "use client" directive ile sadece gerekli kısımları client'a taşırsın. Bundle %50-70 küçülür, performans dramatik iyileşir.

Rendering stratejileri

Static (SSG)

Build zamanı render. CDN'den anlık servis.

ISR (Incremental Static Regeneration)

Static + background revalidation. E-ticaret için ideal.

SSR (Server-Side Rendering)

Her istekte render. Dinamik içerik.

CSR (Client-Side Rendering)

Tarayıcıda render. Eski SPA yaklaşımı.

Streaming

Sayfa parçalarını hazır oldukça stream et.

Data fetching modeli

Server Component içinde fetch() native async/await. Cache otomatik yönetilir. Client Component'te SWR veya React Query gibi kütüphane. Server Actions ile form submit + mutation tek dosyada.

Hosting seçenekleri

• Vercel — Next.js sahibi, en native deneyim
• Netlify — alternatif, edge functions iyi
• Cloudflare Pages — ucuz, sınırsız bandwidth
• AWS Amplify / S3+CloudFront — enterprise
• Self-host Docker — tam kontrol, en ucuz scale

Performans optimizasyon checklist

• next/image component (otomatik AVIF/WebP)
• next/font (font display optimization)
• Dynamic import lazy load
• Server Component varsayılan
• ISR cache stratejisi
• Edge runtime'da lightweight API

Şunu yapmayın: client component'i kötüye kullanmak

"use client" hızlı çözüm olarak görünür ama tüm app'i client'a taşırsa SSR avantajı gider. Server component varsayılan tutup sadece gerçek interactivity gerektiren yerlerde client kullanılır.

Sıkça sorulan sorular