Meta Açıklama: Next.js nedir nasıl çalışır ve React.js’ten hangi yönleriyle ayrılır sorularına net yanıt veren kapsamlı bir başlangıç rehberi. Dosya bazlı yönlendirme (file-based routing) önceden oluşturma (Static Site Generation) sunucu tarafı render (Server Side Rendering) ve artırımlı statik yeniden üretim (Incremental Static Regeneration) gibi kavramlar adım adım açıklanır.
Giriş
Next.js güncel web geliştirme için güçlü bir çatı sunar. React.js üzerinde yükselir. Fakat tek başına bir kütüphane olarak kalmaz. Uygulamayı baştan sona götüren bir yapı sağlar. Yönlendirme. Sunucu tarafı render. Önbellekleme. Görsel optimizasyon. Hepsi kutudan çıkar.
Bu yazı Next.js temellerini açıklar. React.js ile farkları ortaya koyar. Basit bir uygulama iskeleti kurar. Veri çekme ve render stratejilerini gösterir. Son bölümde dağıtım ve performans notları yer alır.
Next.js Nedir ?
Next.js bir React çerçevesidir (React framework). Amaç hibrit render ve güçlü geliştirici deneyimidir (developer experience). Dosya bazlı yönlendirme (file-based routing) kullanır. Sayfaları önceden oluşturur ya da isteğe bağlı olarak sunucuya bırakır. Varsayılan derleyici ve paketleyici gelir. Görsel bileşeni ile resimleri optimize eder (image optimization).
Öne çıkan özellikler:
- Dosya bazlı yönlendirme (routing)
- Sunucu bileşenleri (Server Components)
- Önceden oluşturma (SSG) ve sunucu tarafı render (SSR)
- Artırımlı statik yeniden üretim (ISR)
- Yerleşik API uçları (API routes ve Route Handlers)
- Resim bileşeni ve otomatik optimizasyon (next/image)
- Kenar işlevleri ve ara katman yazılımı (Edge Functions ve Middleware)
React.js ile Farkları
React.js bir kütüphanedir (library). Arayüz kurmayı sağlar. Yönlendirme ve render stratejisi geliştiriciye bırakılır. Next.js ise bir çerçevedir. Varsayılan kararlar getirir.
Temel farklar:
- Yönlendirme: React tek başına yönlendirme içermez. Next.js dosya yapısı ile yönlendirir.
- Render: React genelde istemci tarafı render (Client Side Rendering) kullanır. Next.js SSR ve SSG ile hibrit yaklaşım sunar.
- Veri çekme: React’ta yöntem serbesttir. Next.js sunucu bileşenleri ve fetch ile entegre akış sağlar.
- Performans: Next.js otomatik önbellek (cache) ve resim optimizasyonu sunar.
- Dağıtım: React uygulaması genel bir barındırmaya gider. Next.js Vercel ile sıkı bütünleşir (integration).
- Yapılandırma: Next.js next.config.js ile birçok ayarı tek yerde tutar.
Mimari Bakış
App Router yapısı proje kökünde app klasörü ile başlar. Her klasör bir rota segment olur. layout bileşeni ile üst düzey düzen kurulur root layout. page dosyası o segment için çıktı üretir. Route Handlers ile aynı ağaç içinde HTTP uçları tanımlanır. Bu düzen tekil kaynak noktası mantığını destekler single source of truth.
Yönlendirme File Based Routing
Dosya sistemi rotanın kendisi olur. Statik yollar düz klasörler ile tanımlanır. Dinamik yollar köşeli parantez ile belirlenir dynamic routes. İç içe klasörler hiyerarşik gezinme sunar nested routes. Bu model ek kütüphane gereksinimini ortadan kaldırır. Okunabilirlik artar. Ekibin rota sözleşmesi standart hale gelir.
Proje Kurulumu
Yeni Proje
npx create-next-app@latest my-app --typescript --eslint cd my-app npm run dev
Varsayılan kurulum App Router kullanır. Klasör app/ olarak gelir.
Render Stratejileri
- Önceden üretim Static Site Generation SSG
Sayfa derleme anında oluşur. Hız yüksek olur. İçerik sabittir ya da seyrek güncellenir. - Sunucu tarafı oluşturma Server Side Rendering SSR
Sayfa her istekte sunucuda üretilir. Veri tazeliği ön plandadır. Önbellek politikası buna göre ayarlanır. - Artırımlı statik yeniden üretim Incremental Static Regeneration ISR
Sayfa statik sunulur. Arka planda belirli aralık ile güncellenir. Hem hız hem tazelik dengelenir. - İstemci tarafı etkileşim Client Components
Yalnızca tarayıcıda gereken durum yönetimi için kullanılır. Varsayılan sunucu bileşeni kalır. Gereken yerde use client eklenir.
Veri Toplama ve Önbellek
Next.js sunucu bileşenlerinde yerleşik fetch kullanımı sunar. Önbellek davranışı açık seçik belirlenir. force cache seçeneği ile sonuç saklanır. no store ile her istekte taze veri alınır. ISR ile revalidate süresi verilir. Böylece veri tazeliği ve performans dengesi proje gereksinimine göre ayarlanır.
API Rotaları ve Route Handlers
Aynı proje ağacında hafif sunucu uçları tanımlanır. GET POST PUT DELETE gibi yöntemler desteklenir. Basit iş kuralı. Form işleme. Webhook dinleme. Bu katmanda çözülebilir. Ayrı bir mikro servis zorunluluğu azalır. Küçük ekipler için bakım maliyeti düşer.
Orta Katman Middleware ve Kenar Çalışma Edge
Middleware istek daha hedefe varmadan devreye girer. Kimlik denetimi ya da yönlendirme gibi işleri üstlenir. Edge çalışma ortamı ile yanıt süresi düşer. İçerik son kullanıcıya yakın noktada üretilir. Bu yaklaşım küresel kullanıcı dağılımında önemli bir kazanç sağlar.
Görsel Optimizasyonu
Görseller otomatik yeniden boyutlandırılır. Uygun format seçilir. Gecikmeli yükleme lazy loading uygulanır. Bu sayede ilk boyama hızı artar first contentful paint. Mobil ağ koşullarında hissedilir iyileşme sağlanır. Alt metin zorunlu tutulur alt text. Erişilebilirlik ve SEO için bu kural önem taşır.
Performans ve İzleme
Kod bölme varsayılan çalışır code splitting. Kritik yollar optimize edilir. Önbellek katmanı ölçülür. Resim ve yazı tipi stratejisi kontrol edilir. Hata sınırları eklenir error boundaries. İzleme ve günlükleme araçları devreye alınır monitoring ve logging. Üretim ortamında gerçek kullanıcı ölçümleri takip edilir real user monitoring.
Dağıtım ve Ortam Değişkenleri
Vercel ile otomatik dağıtım akışı sorunsuz ilerler. Depoya itilen her değişim yeni önizleme sunar preview deployment. Ortam değişkenleri panelden yönetilir. Gizli anahtarlar yalnızca sunucu tarafında kalır. İstemciye açılacak değerler NEXT PUBLIC öneki alır. Alternatif barındırma için build ve start komutları ile klasik sunucu modeli de uygulanır.
Sonuç
Next.js modern web için sağlam bir temel sunar. React ekosistemi ile uyumlu kalır. Yönlendirme ve render stratejileri tek çatı altında toplanır. Performans ve SEO varsayılan olarak gözetilir. Küçük projeden kurumsal ölçeye kadar güvenilir bir yol haritası çıkar. Doğru strateji seçimi ile hız ve tazelik aynı sayfada buluşur.
KAYNAKLAR
https://nextjs.org/docs?utm_source
https://nextjs.org/docs/app?utm_source
https://nextjs.org/docs/app/getting-started?utm_source
https://nextjs.org/docs/app/getting-started/fetching-data?utm_source
https://nextjs.org/docs/app/getting-started/route-handlers-and-middleware?utm_source
https://nextjs.org/docs/app/getting-started/images?utm_source
https://nextjs.org/docs/14/app/building-your-application/deploying?utm_source
