Son 10 yılın en önemli teknolojik devrimlerinden biri olan Facebook (Meta) yapımı React, web geliştirmeyi "bileşen (component)" bazlı, tekrar kullanılabilir ve dinamik yapılara bölmesi oldu. Ancak React, kendi başına çerçeve (framework) değil, sadece bir arayüz kütüphanesidir. Başlangıçta harika olsa da, büyük projelerde ciddi eksiklikleri bulunmaktaydı. Tüm sayfanın tarayıcıda oluşturulması (CSR - Client Side Rendering) SEO (Arama Motoru Optimizasyonu) açısından büyük sorunlar yaratıyor, saniyeler süren ilk yükleme hızları (First Paint) kullanıcı deneyimini bozuyordu.
İşte tam burada devreye Vercel tarafından geliştirilen Next.js girdi ve React üzerine eksik olan tüm "mimariyi" inşa ederek web geliştirmenin dünya çapındaki de facto (kesin geçerli) standardı haline geldi.
Neden Saf React (Vite/CRA) Yerine Next.js Kullanıyoruz?
Server-Side Rendering (SSR) - SEO ve Performans Kralı
Standart bir React uygulamasında, arama motoru botları (Googlebot gibi) web sitenize girdiğinde bomboş tek satırlık bir HTML sayfasıyla karşılaşır. İçeriğin dolması için gigabaytlarca Javascript kodunun istemci (kullanıcı makinesi) tarafında indirilmesi ve çalışması (CSR) gerekir. Mobil cihazlarda bu durum feci bir gecikmeye yol açar.
Next.js'in SSR yeteneği, sayfanın tamamını güçlü sunucularda hazırlayıp kullanıcının tarayıcısına "tam ve dolu HTML" olarak gönderir. Bu sayede web siteniz ilk açıldığı andan itibaren görünürdür, inanılmaz hızlı açılır ve Google tarafından A+ puan ile indekslenir.
Static Site Generation (SSG) ve ISR (Incremental Static Regeneration)
Her ziyaretçide sayfayı tekrar oluşturmak sunucuya yük bindirir. Eğer e-ticaret sitenizin ürün sayfası veya bir blog sekmesi çok değişmiyorsa, Next.js projenizi derlediğiniz (build) sırada o sayfayı standart HTML dosyası olarak kaydeder (SSG). Milyonlarca ziyaretçi gelse bile sıfır sunucu yüküyle (CDN üzerinden) anında açılır.
Dahası, ISR teknolojisi ile statik sayfalarınızın "arka planda, sayfa yenilenmeden, belirlediğiniz saniyede bir" kendisini güncellemesini sağlayabilirsiniz. Ne statik site dezavantajına sahip olursunuz ne de SSR maliyetine katlanırsınız!
Dosya Tabanlı Yönlendirme (App Router Modeli)
React'te React Router DOM kurup sayfalarca haritalama yapmak eziyettir. Next.js 13+ ile gelen App Router sayesinde; projenizdeki app/hakkimizda/page.tsx dosyasını oluşturduğunuz an, sistem sizin için arkaplanda siteniz.com/hakkimizda URL adresini canlıya alır ve yönlendirir. İçiçe dizinler, özel layout'lar (dış iskeletler) tasarlamak çok basittir.
Server Components Devrimi (RSC) ve Server Actions
Next.js'i şu an eşsiz kılan teknolojilerin başında "React Server Components" konsepti geliyor. Önceden tüm React bileşenleri eninde sonunda istemciye gönderilirdi.
Yeni modelde, varsayılan olarak tüm React bileşenleri Sunucu Bileşenidir. Sadece sunucuda çalışır, veritabanına bağlanır ve asla istemci (kullanıcı) tarafına yollanmaz. Müşterinin tarayıcısına sadece o bileşenin oluşturduğu "saf HTML" gönderilir. Sonuç: Kullanıcının cihazına yüklenen Javascript paketi dramatik şekilde küçülür.
// SADECE SUNUCUDA ÇALIŞAN BİR COMPONENT
// Müşterinin bilgisayarı asla SQL kodunu veya şifreleri göremez!
import db from '@/lib/db'
export default async function EnCokSatanlarListesi() {
// Aracı bir API yazmanıza gerek kalmadan, doğrudan Node.js ortamından DB'ye ulaştınız.
const urunler = await db.products.findMany({ top: 5 })
return (
<div class="grid">
{urunler.map(urun => (
<div key={urun.id} class="card">
<h3>{urun.baslik}</h3>
<p>Fiyat: {urun.fiyat} ₺</p>
</div>
))}
</div>
)
}
Peki ya bir butona tıkladığımızda (onClick) veritabanına bir şey yazacaksak? Eskiden Express.js ile uzun uzun API yazıp, fetch() ile post ederdik. Next.js'in yeni "Server Actions" (Sunucu Eylemleri) mantığıyla formların veya butonların asenkron fonksiyonları bile doğrudan sunucudaki işlevleri çağırabiliyor.
Görüntü (Image) ve Font Optimizasyonu
Standart HTML <img> etiketi SEO ve hız katilidir. Next.js'in next/image bileşeni büyük ve ham resimleri, kullanıcının cihaz ekran boyutuna veya tarayıcı desteğine (WebP, AVIF) göre sunucuda otomatik küçültür ve dönüştürür. Üstelik tam ekranda görünene kadar resmi indirmez (Lazy Loading). Sitenizin Core Web Vitals (CWV) puanları tavan yapar.
Sonuç
Artık düz React ile Dashboard veya basit bir iç yazılım dışındaki projelere başlamak çok mantıklı değil. Etkileşimli, ultra hızlı, arama motoru dostu ve güvenliğin gerekli olduğu tüm projelerde (E-Ticaret siteleri, Haber portalları, Kurumsal platformlar vb.) "Next.js tabanlı React geliştirme" rakipsiz sektör şampiyonudur.
Kaynaklar
- Next.js Resmi Dokümantasyonu (Vercel)
- React Resmi "Learn" Dokümantasyonu
- Next.js İnteraktif Öğrenme Platformu
Üzer Teknoloji olarak portfolyomuzda yer alan Balkanlar'ın en büyük projesi Çmimi i Arıt ve kripto platformu CoinStckPro'da olduğu gibi, en yoğun veri yüklerinde bile milisaniyelerde cevap veren premium hizmetlerimiz için Next.js + TypeScript tam yığın ekosistemini (Fullstack Mimarisi) tercih ediyoruz.