React & Next.js — Yüksek performanslı web uygulamaları
Tüm frontend projelerinde React 18 ve Next.js 15 (App Router) kullanıyoruz: tanıtım sitelerinden on binlerce kullanıcılı karmaşık SaaS uygulamalarına kadar. Kod katı TypeScript ile yazılır, testler otomatiktir.
Projelerimiz için neden Next.js
App Router'lı Next.js 15 benzersiz bir hibrit model sunar: statik sayfalar (SSG) CDN'den servis edilir, dinamik sayfalar tarayıcıya gereksiz JavaScript göndermeyen Server Components ile çalışır, gerçek zamanlı veri içeren sayfalar ise yalıtılmış Client Components kullanır.
Görsel dosyalar `<Image>` bileşeniyle otomatik olarak optimize edilir (WebP/AVIF, duyarlı srcSet, lazy-loading), fontlar `next/font` ile kritik CSS içine gömülür, üçüncü taraf betikler ise öncelik stratejileriyle yüklenir. Bu optimizasyonlar birlikte sayfanın ağırlığını ve yükleme gecikmesini azaltır.
- Pazarlama sayfaları için Server Components — istemcide minimum JS, taranmaya hazır HTML
- Canlı veri içeren paneller için Suspense ile streaming SSR
- Yarı dinamik içerik için Incremental Static Regeneration (ISR)
- Yeniden render olmadan karmaşık layout'lar için Route Groups ve Parallel Routes
Katı TypeScript — sessiz hata yok
Tüm projelerimiz `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` ve `noUncheckedIndexedAccess` ayarlarıyla TypeScript kullanır. Bu ayarlar, çalışma zamanı hatalarının bütün kategorilerini derleme aşamasında engeller: undefined erişimi, API yanıtlarındaki eksik tipler, hatalı karşılaştırmalar. Tipik bir projede, herhangi bir testten önce CI'da 0 TypeScript hatası bulunur.
State yönetimi için Zustand (hafif, boilerplate'siz) veya yerel state için React Context kullanırız. Veri çekme işlemini TanStack Query yönetir (otomatik önbellek, akıllı geçersiz kılma, stale-while-revalidate). Formlar React Hook Form + Zod şema doğrulamasıyla çalışır — kod tekrarı olmadan eşzamanlı ve eşzamansız doğrulama.
- Yasaklı kalıplar (any, console.log, magic string) için özel kurallı ESLint
- Tek tip yapılandırmalı Prettier — biçimlendirme yüzünden reddedilen PR yok
- Harici API'lerden gelen verilerin çalışma zamanı doğrulaması için Zod
- Path alias'lar (`@/components/...`) — `../../..` olmadan net import'lar
Otomatik test ve CI/CD
Vitest ile birim testleri (hızlı, Jest API'si ile uyumlu), React Testing Library ile bileşen testleri, 3 tarayıcıda (Chromium, Firefox, WebKit) Playwright ile E2E testleri. GitHub Actions pipeline'ı her PR'da tüm testleri çalıştırır; herhangi biri başarısız olursa merge engellenir. İş mantığında en az %80 kapsama.
- Lighthouse CI — 90'ın altındaki skor staging'e dağıtımı engeller
- Otomatik bundle analyzer — bundle main'e göre %5'ten fazla büyürse uyarı
- UI bileşenleri için Storybook — canlı görsel dokümantasyon
Avantajlar ve sınırlamalar
Avantajlar
- İlk günden itibaren mimariye yerleşik performans optimizasyonu.
- Yerel SSR ve SSG — arama motorları ve tarayıcılar için eksiksiz HTML.
- Katı TypeScript hataları üretimde değil, derleme sırasında yakalar.
- Olgun ekosistem: Vercel, binlerce paket, devasa bir topluluk.
Sınırlamalar
- App Router ve Server Components için öğrenme eğrisi diktir.
- Ana sürümler arasında sık değişiklikler olur — bakım gerektirir.
- Basit bir statik site için Next.js, düz HTML'e kıyasla gereğinden fazla olabilir.
- Büyük build'ler derleme süresini ve CI maliyetini artırır.
Kısa değerlendirme
Hızlı, indekslenebilir ve ölçeklenebilir olması gereken web siteleri ve uygulamaları için React & Next.js'i seçin. Etkileşimsiz tek bir statik açılış sayfası için daha basit bir çözüm yeterlidir.
Teknik özellikler tablosu
| Yetenek | Sınır / eşik | Tipik kullanım | |
|---|---|---|---|
| Render | SSR, SSG, ISR, CSR | Server Components tarayıcı API'lerini sınırlar | Statik pazarlama + dinamik panel |
| Performans | Statik HTML ve Server Components tarayıcıdaki JS'yi azaltır | Hydration JS'i etkileşimle birlikte artar | Yüksek trafikli, SEO'nun kritik olduğu siteler |
| Ölçekleme | On binlerce kullanıcı, edge CDN | Node veya serverless hosting gerektirir | SaaS, portallar, e-ticaret |
| Tipik maliyet | Açık kaynak, hosting ~0 €'dan başlar | Serverless fonksiyonlar kullanıma göre ücretlendirilir | Küçük projelerden kurumsala kadar |
Next.js ve alternatifleri
| Kriter | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| Tek framework'te SSR + SSG | Evet, yerel | Kısmen (Nuxt evet, Vite hayır) |
| React ekosistemi | Tam | Vue (Nuxt) veya çoklu framework (Astro) |
| Tamamen statik site için en uygun | İyi | Astro daha hafiftir |
Sık sorulan sorular
Neden düz React (Vite) değil de Next.js?
Vite ile React yalnızca istemcide render eder, yani ilk HTML boştur — SEO ve GEO için zayıftır. Next.js, SSR ve SSG ekleyerek arama motorlarının ve crawler'ların hemen okuyabildiği eksiksiz HTML sunar.
Next.js SEO için iyi mi?
Evet. SSR/SSG indekslenebilir HTML sunar, meta veriler ve JSON-LD sunucuda üretilir.
Mevcut bir siteyi Next.js'e taşıyabilir miyim?
Evet, adım adım: sayfalar tek tek taşınır; değişen adresler için URL'ler ve 301 yönlendirmeleri korunur.
Next.js nasıl bir hosting gerektirir?
Statik sayfalar her CDN'de çalışır. Dinamik fonksiyonlar (SSR, API route'ları) için Node.js veya Vercel, Netlify gibi bir serverless runtime ya da bir Docker konteyneri gerekir.