Next.js Rehberi 2026: React Framework ile Modern Web

---

Giriş

Okuduğunuz bu sitenin kendisi Next.js 16 ile yapıldı. Blog, hizmet sayfaları, 4.066 programatik SEO sayfası, çok dilli yapı, tema sistemi — hepsi bu framework üzerinde çalışıyor. Yani anlatacaklarımı teorik bilmiyorum; her gün üretim yapıyorum, her deploy'da build süresini ölçüyorum.

2026'da Next.js, React ekosisteminin fiili üretim katmanı. Ama "herkes kullanıyor" demek "size uygun" demek değil. Doğru senaryoda devrimci, yanlış senaryoda aşırı mühendisliktir. Rehberde ne olduğunu, nasıl çalıştığını ve ne zaman seçmeniz gerektiğini 10+ yıl deneyim ve 2,200+ müşteri perspektifinden net anlatıyorum. Arka plan için web tasarım rehberimize bakabilirsiniz.

---

Key Takeaways

• React'ın production katmanıdır. Routing, rendering, data fetching, caching, SEO — React'ın boş bıraktığı her şeyi dolduruyor
• App Router + Server Components 2026'nın standardı. Pages Router legacy projeler için; yeni işlerde App Router seçin
• Tek rendering stratejisi yok. Aynı uygulamada SSG, SSR, ISR, Streaming karışık kullanılır
• Vercel en kolay yol ama tek yol değil. Netlify, Cloudflare Pages, self-hosted da üretimde stabil
• Herkes için değil. İçerik ağırlıklı + editör özerkliği isteyen projelerde WordPress hâlâ daha hızlı

---

Next.js Nedir? React'ın Production Katmanı

Vercel ekibinin geliştirdiği bir React framework'ü. "React framework'ü" ifadesi kafa karıştırıcı olabilir — React zaten framework değil mi? Değil. React bir kütüphane; UI component'leri üretirsiniz ama routing, SEO, sunucu render, data fetching, caching, deployment gibi üretim için gerekli katmanları size bırakır.

React ile blog yazmak için router, SSR çözümü, meta tag yönetimi, image optimizer, build pipeline kurmanız gerekir. Bu framework hepsini kutu içinde verir — kurulum yok, karar yok, standart var.

2026'da güncel sürüm 16. En büyük fark App Router, Server Components ve Partial Prerendering'in artık varsayılan olması. Bu üç özellik, framework'ü "React üstüne ince katman" olmaktan çıkarıp "modern web için uçtan uca platform" haline getirdi.

• Dosya tabanlı routing — Klasör yapısı URL yapısı oluyor
• Server/Client component ayrımı — Kodun nerede çalıştığını kontrol edersiniz
• Çoklu rendering stratejisi — SSG, SSR, ISR, Streaming tek projede
• Image ve font optimizasyonu — Otomatik resize, lazy loading, format dönüştürme
• Metadata API — SEO meta tag'lerini tip güvenli tanımlama
• Middleware — İstek sunucuya varmadan çalışan kod (auth, redirect)
• Built-in caching — Fetch'ten render sonuçlarına kadar katmanlı önbellekleme

candavarci.com.tr'yi kurarken hepsini aktif kullandık. 4.066 pSEO sayfası generateStaticParams ile build-time'da üretildi, blog yazıları ISR ile (60s revalidate) hem taze hem hızlı. Sonuç: ortalama LCP 1.2 saniye.

---

Next.js vs Diğer Framework'ler

Alternatifleri bilmek stratejik karar için şart. 2026'da ciddi seçenekler var.

Remix (React Router v7): Loader/action pattern ile form handling çok temiz. E-ticaret ve form ağırlıklı projelerde iyi seçim. Dezavantajı: static generation bu kadar güçlü değil.

Astro: İçerik odaklı siteler için. "Island architecture" ile varsayılan olarak sıfır JavaScript üretiyor. Blog, dokümantasyon, pazarlama siteleri için daha hızlı. Ama interaktif uygulama için tasarlanmadı.

SvelteKit: Svelte'ın meta-framework'ü. Bundle size küçük, reactive model zarif. Ama React değil — ekip React biliyorsa geçiş anlamsız.

Gatsby: Bir zamanlar React SSG standardıydı. 2026'da aktif geliştirme durdu. Yeni projelerde seçmeyin.

Pratik karar: %80 ihtimalle Next.js doğru seçim. %15 ihtimalle Astro (içerik sitesi) veya Remix (form ağırlıklı) daha iyi. %5 ihtimalle hiçbir React framework'ü gerekmez.

---

App Router vs Pages Router: Hangisini Seçmeli?

İki routing sistemi var: eski Pages Router (pages/ klasörü) ve yeni App Router (app/ klasörü). Yeni proje için net cevap: App Router.

Pages Router 2016'dan beri framework'ün kalbiydi. getStaticProps, getServerSideProps gibi data fetching fonksiyonları vardı. Stabil ama bir sınırı vardı: tüm component'ler client-side çalışıyordu.

Sürüm 13 ile gelen App Router bu sınırı yıktı. Server Components sayesinde component'lerin kendisi sunucuda render ediliyor, sonuç HTML olarak tarayıcıya gönderiliyor.

// app/blog/[slug]/page.tsx — Server Component
import { getPost } from '@/lib/cms'

export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPost(slug) // Doğrudan DB erişimi

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}

Bu kodda async component, doğrudan veritabanından veri çekiyor. API route yok, loading state yok. Tarayıcıya gelen sadece HTML.

App Router'ın yenilikleri: Server Components (default), nested layouts, streaming (Suspense), parallel routes, intercepting routes, Partial Prerendering.

Ne zaman Pages Router kalsın? Mevcut kararlı projeniz varsa — migration maliyeti yüksek. Ama yeni proje için Pages Router'a başlamanın haklı gerekçesi yok.

---

React Server Components: Paradigma Değişimi

Sürüm 16'nın en radikal değişikliği Server Components. React dünyasında 10 yıllık "her şey client-side" varsayımını yıkıyor.

Klasik React: Tarayıcı sayfayı açar, JavaScript bundle indirilir (200-500KB), çalıştırılır, component'ler render edilir, API çağrıları yapılır, sayfa görünür. Kullanıcı bu süre boyunca boş ekran görür.

Server Component: Sunucu component'i kendi çalıştırır, veritabanından veri çeker, HTML olarak render eder, tarayıcıya gönderir. Kullanıcı sayfayı anında görür. JavaScript bundle'a hiçbir şey eklenmez.

// app/hizmetler/page.tsx — Server Component
import { db } from '@/lib/db'

export default async function ServicesPage() {
  // Bu kod SUNUCUDA çalışır, tarayıcıya gönderilmez
  const services = await db.services.findMany({
    where: { active: true },
    orderBy: { priority: 'desc' },
  })

  return (
    <div>
      {services.map((service) => (
        <ServiceCard key={service.id} service={service} />
      ))}
    </div>
  )
}

Server Component sınırları: React hook'larını kullanamaz, event handler yazamaz, tarayıcı API'lerine erişemez, interaktif değildir.

Client Component ne zaman? Form, buton, animasyon gibi interaktivite gerektiğinde. Dosyanın başına 'use client' direktifi koyarsınız.

'use client'
import { useState } from 'react'

export function ContactForm() {
  const [email, setEmail] = useState('')
  return <form>...</form>
}

Pratik strateji: Varsayılan Server Component. Interaktivite gerektiğinde Client'a çevirin. Server içine Client yerleştirilir; tersi değil.

Performansa etkisi büyük. candavarci.com.tr'de blog yazılarını Server Component ile render ettiğimizde JavaScript bundle 127KB'tan 34KB'a düştü — %73 azalma. TTI 2.1s'den 0.8s'ye indi.

---

Rendering Stratejileri: SSG, SSR, ISR, Streaming, PPR

En güçlü yanlarından biri: aynı uygulamada farklı sayfalar farklı rendering stratejisi kullanabilir.

SSG (Static Site Generation): Sayfa build sırasında bir kez render edilir, CDN'e dağıtılır. En hızlı seçenek. Pricing, about, blog, dokümantasyon için ideal.

// app/blog/[slug]/page.tsx — SSG
export async function generateStaticParams() {
  const posts = await getAllPosts()
  return posts.map((post) => ({ slug: post.slug }))
}

export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPost(slug)
  return <article>{post.content}</article>
}

SSR (Server-Side Rendering): Her istekte sunucuda render. Kişiselleştirilmiş içerik (dashboard, profil) için tek yol.

ISR (Incremental Static Regeneration): SSG + SSR birleşimi. Statik render edilir, belirli aralıklarla arka planda yeniden üretilir. Hem SSG hızı hem tazelik. Blog, haber, ürün katalogları için mükemmel.

// app/products/[id]/page.tsx — ISR
export const revalidate = 60 // Her 60 saniyede yeniden üret

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const product = await getProduct(id)
  return <ProductView product={product} />
}

Streaming: React Suspense ile hazır kısımlar önce, yavaş kısımlar sonra gönderilir.

Partial Prerendering (PPR): 2026'nın yeni özelliği. Tek sayfada statik + dinamik bölümler karışık render edilir. E-ticaret ürün sayfasında: ürün bilgileri statik, stok bilgisi dinamik.

Pratik karar:

Sayfa Türü · Strateji

Anasayfa, hakkımızda · SSG

Blog yazıları · SSG veya ISR

Ürün listesi · ISR

Kullanıcı dashboard · SSR

Canlı veri (borsa, skor) · Streaming

E-ticaret ürün detay · PPR

---

Dosya Tabanlı Routing ve Layout Sistemi

En sevilen özelliklerden biri dosya tabanlı routing. Klasör yapınız URL yapınız, router config dosyası yok.

app/
├── page.tsx              → /
├── about/page.tsx        → /about
├── blog/
│   ├── page.tsx          → /blog
│   └── [slug]/page.tsx   → /blog/:slug (dinamik)
└── hizmetler/
    └── [slug]/page.tsx   → /hizmetler/:slug

Her page.tsx bir sayfa, her klasör bir URL segmenti. [slug] dinamik parametre, [...slug] catch-all.

Layout sistemi: İç içe geçen UI kalıpları. Header, footer, sidebar bir kez yazılır, tüm alt sayfalar kullanır.

// app/layout.tsx — Root layout
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="tr">
      <body>
        <Header />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  )
}

Kullanıcı /blog/nextjs-rehberi sayfasına gittiğinde root layout (header + footer) içinde blog layout (sidebar + content) iç içe çalışır. Layout geçişlerinde sayfa yeniden render edilmez — sadece children değişir. Hem performans hem state için kritik.

Özel dosyalar: page.tsx, layout.tsx, loading.tsx (otomatik Suspense), error.tsx, not-found.tsx, route.ts (API endpoint).

candavarci.com.tr örneği: app/[locale]/blog/[kategori]/[slug]/page.tsx tek dosyasıyla 8 dil × 6 kategori × N blog rotasını yönetiyoruz.

---

Data Fetching: Server-Side, Client-Side, Caching

Veri çekme artık daha basit — ama katmanlı.

Server Component'te fetch (en yaygın): async component içinde doğrudan fetch veya ORM çağrısı. Veri sunucuda çekilir, HTML olarak gelir.

// app/blog/page.tsx — Server-side fetch
export default async function BlogPage() {
  const posts = await fetch('https://cms.example.com/posts', {
    next: { revalidate: 3600 }, // 1 saat cache
  }).then((r) => r.json())

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Framework, fetch fonksiyonunu genişletmiş: next.revalidate ile ISR kontrolü, next.tags ile cache invalidation, cache: 'no-store' ile her istekte taze veri. Native fetch'te yok.

Client Component'te fetch: Kullanıcı etkileşimine bağlı veri için. useEffect yerine TanStack Query veya SWR kullanın — cache, refetch, optimistic update'i halleder.

Caching katmanları: En karmaşık yan. Dört katman var: Request Memoization, Data Cache, Full Route Cache, Router Cache. Çoğu zaman default'lar yeterli. Özel senaryolarda revalidatePath, revalidateTag, unstable_cache fonksiyonlarına bakın.

---

Next.js 16 ile SEO: Metadata API, Sitemap, Robots

SEO, React'a karşı en büyük avantajlardan biri. React SPA'da meta tag yönetimi ek kütüphane gerektirir; bu framework'te built-in Metadata API var.

Dynamic metadata: Sayfa parametresine bağlı meta tag üretmek için generateMetadata fonksiyonu:

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'
import { getPost } from '@/lib/cms'

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>
}): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)

  return {
    title: `${post.title} | Blog`,
    description: post.excerpt,
    alternates: {
      canonical: `https://candavarci.com.tr/blog/${slug}`,
    },
    openGraph: {
      type: 'article',
      publishedTime: post.publishedAt,
      images: [post.coverImage],
    },
  }
}

Sitemap: app/sitemap.ts dosyası ile otomatik /sitemap.xml endpoint'i:

// app/sitemap.ts
import type { MetadataRoute } from 'next'
import { getAllPosts } from '@/lib/cms'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts()

  return [
    {
      url: 'https://candavarci.com.tr',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    ...posts.map((post) => ({
      url: `https://candavarci.com.tr/blog/${post.slug}`,
      lastModified: post.updatedAt,
      changeFrequency: 'weekly' as const,
      priority: 0.7,
    })),
  ]
}

Robots.txt: app/robots.ts ile programatik üretim. Structured data (JSON-LD) için schema markup rehberimize bakın.

candavarci.com.tr'de 4.066 pSEO sayfası için dinamik metadata üretiyoruz, sitemap otomatik güncelleniyor, Core Web Vitals skorları 95+ seviyesinde. Detaylı SEO kontrolleri için Google Search Console rehberimize ve Core Web Vitals rehberimize göz atın.

---

Deployment: Vercel vs Alternatifler

Framework'ü Vercel yapıyor ve Vercel en sorunsuz yol. Ama tek seçenek değil.

Vercel: Zero-config deployment, preview deployment, edge network, serverless functions entegre. Ücretsiz katman küçük projeler için yeterli. Kurumsal ölçekte Pro/Enterprise tier'ları devreye giriyor. En güçlü yanı: birebir uyumluluk. Her yeni özellik ilk günden çalışır.

Netlify: En eski rakip. Desteği iyi ama bazen ISR ve Streaming gibi özelliklerde gecikme olabiliyor. Küçük-orta projeler için Vercel kadar iyi.

Cloudflare Pages: 2026'da desteğini ciddi biçimde güçlendirdi. Edge network Vercel'den geniş, bandwidth ücretsiz, DDoS koruma built-in. Cloudflare Workers ile middleware çalışır. Image Optimization ekstra yapılandırma gerektiriyor.

Self-hosted (Docker, VPS): Teknik olarak mümkün — next build + next start her Node.js sunucuda çalışır. Avantaj: maliyet kontrolü, veri egemenliği. Dezavantaj: DevOps yükü (scaling, SSL, CDN, monitoring). Küçük ekip için önermem.

Hyperscaler'lar (AWS Amplify, Cloud Run, Azure): Mevcut cloud hesabınız varsa faturalandırma merkezi olduğundan avantajlı. Ama framework'e özel optimizasyon Vercel/Cloudflare kadar iyi değil.

Pratik karar: Çoğu proje için Vercel. Maliyet sorun oluyorsa Cloudflare Pages. Enterprise veri yönetimi gerekliyse self-hosted.

---

Ne Zaman Next.js? Senaryo Bazlı Karar

Öğrenmek ayrı, doğru yerde kullanmak ayrı konu.

Seçin eğer:

• Marketing agility yüksek (A/B test, conversion optimization, custom animasyon)
• Performans kritik (e-ticaret, SaaS landing, yüksek trafik)
• SEO + dinamik içerik birlikte
• Ekipte React deneyimi var
• Custom backend entegrasyonu çok

Seçmeyin eğer:

• İçerik ağırlıklı blog veya dokümantasyon sitesi → Astro daha hızlı
• Editör özerkliği kritik → WordPress daha güçlü
• Static kurumsal tanıtım sitesi → HTML + CSS yeter
• Ekipte React bilen yok → Öğrenme + bakım maliyeti birikir
• 3 sayfalık mikro site → Aşırı mühendislik

WordPress'ten geçiş senaryosu: İki yol var. (1) Tam migrasyon: İçerikleri headless CMS'e (Sanity, Contentful, Strapi) taşıyın, yeni frontend yazın. (2) Hybrid: WordPress'i headless CMS olarak kullanın, frontend'i yeniden render edin. İkinci yol editör ekibinize dokunmadan performans kazanmanıza izin veriyor. Migration süreci için WordPress rehberimize ve WordPress vs Next.js karşılaştırmamıza bakın.

candavarci.com.tr gerçek ölçüm: WordPress'ten sürüm 16'ya geçiş sonrası LCP 3.2 saniyeden 1.1 saniyeye düştü, mobil PageSpeed skoru 42'den 96'ya çıktı, organik trafik 3 ay içinde %40 arttı. Ama bu her migrasyonda garanti değil — doğru kurulum, cache stratejisi, image optimization şart.

Tema yönetimi için dark mode uygulama rehberimize, tasarım disiplin farkı için UX UI farkı yazımıza göz atın.

---

Sonuç: Doğru Senaryoda Devrimci

Next.js 2026'da React ekosisteminin fiili production katmanı. Server Components, App Router, Partial Prerendering gibi yenilikler web geliştirme paradigmasını değiştiriyor. Ama "herkes kullanıyor" demek "size uygun" demek değil. İçerik ağırlıklı blog için Astro daha iyi, editör özerkliği için WordPress daha güçlü, 3 sayfalık mikro site için düz HTML yeter. Değeri doğru senaryoda ortaya çıkıyor: performans kritik, SEO zorunlu, dinamik içerik + etkileşim bir arada, ekipte React deneyimi var.

Bu sitenin kendisi sürüm 16 ile yapıldı. Yazdığım her şey kendi üretim sürecimden geliyor.

---

Ücretsiz Next.js Audit / Migration Görüşmesi

Mevcut projenizi audit ettirmek mi istiyorsunuz? WordPress'ten migration mı planlıyorsunuz?

10+ yılda 2,200+ müşteri deneyimi ve bu sitenin kendisini sürüm 16 ile kurmuş bir ekibiz. Mevcut sitenizi inceler, migration stratejisi çıkarır, performans kazanç tahminini paylaşırız — ücretsiz.

Ücretsiz Next.js Audit / Migration Görüşmesi Alın →

---

İlgili içerikler:

• Web Tasarım Rehberi 2026 — UX + UI + Next.js + Conversion (parent pillar)
• WordPress Rehberi — WordPress ekosistemi ve ne zaman seçmeli
• WordPress vs Next.js — İki platform karşılaştırma
• Dark Mode Uygulama Rehberi — Tema sistemi
• UX UI Farkı — İki disiplin nasıl ayrılır
• Core Web Vitals Rehberi — LCP, INP, CLS optimizasyonu
• Google Search Console Rehberi — SEO takip
• Schema Markup Rehberi — Structured data ve JSON-LD

---

Yazar: Can Davarcı — 10+ yıl deneyim, 2,200+ müşteri, candavarci.com.tr kurucusu

Yayın tarihi: 10 Nisan 2026