Next.js ile Modern Web Gelistirme: 2026 Rehberi

Next.js 2026 itibariyle "React'ın kullandığımız hali" demekten uzak, full-stack bir web platformu olarak konumlandı. App Router, React Server Components, Server Actions ve Turbopack ile SEO dostu, performanslı ve mühendis-dostu uygulama üretmenin yolu belirgin şekilde değişti. Bu yazıda Next.js ile modern web geliştirme için gerekli mimari, pattern'lar ve deployment kararlarını inceliyoruz.

Next.js Mimarisi: App Router Öncelikli

2026'da Pages Router hala destekleniyor ama yeni projeler App Router ile başlamalı. App Router'ın getirdiği köklü değişim: her page.tsx varsayılan olarak Server Component'tir. Bu, veri çekmek için getServerSideProps veya getStaticProps gerektirmeden, doğrudan async fonksiyon yazılabilmesi demektir.

Route organizasyonu için önerilen yapı:

• app/(marketing)/ — public pazarlama sayfaları, ayrı layout ile
• app/(app)/ — kimlik doğrulamalı uygulama route'ları
• app/api/ — REST API endpoint'leri (Route Handler)
• app/_components/ — paylaşılan component'lar (underscore route'tan çıkarır)

Parantezli gruplar URL'e yansımaz — (marketing)/pricing/page.tsx URL'i /pricing olur. Bu, farklı layout'lar için gruplama imkanı verir.

Server Components ve Client Components

RSC (React Server Components) Next.js'in en büyük kavramsal değişimi. Prensipler:

• Varsayılan Server: page.tsx, layout.tsx varsayılan RSC — browser'a JS olarak gitmez
• 'use client' direktifi: Browser API, state, effect gerektiren component'larda
• Compose yaklaşımı: Client component içinde Server Component çocuk olarak geçirilebilir (children prop)
• Veri çekme: Server component içinde doğrudan DB veya API çağrısı — no useEffect

Hata pattern'ı: Her şeyi 'use client' yapmak. Bu, RSC'nin tüm yararını (bundle size, SEO, streaming) kaybettirir. Disiplin: interaction olmayan her yer Server Component kalır.

Server Actions: Form ve Mutation

Server Actions, backend mutation'ları için Next.js 14+ ile gelen güçlü paradigma. 'use server' direktifi ile işaretlenmiş bir fonksiyon, client'tan doğrudan çağrılabilir:

• Form submission: <form action={createPost}> — middleware yok, API endpoint yok
• Optimistic UI: useOptimistic hook ile anında UI güncellemesi
• Progressive enhancement: JavaScript devre dışı olsa bile çalışır
• Revalidation: revalidatePath / revalidateTag ile cache güncelleme

Geleneksel REST API'ye göre kazanç: endpoint yazmak, fetch call yazmak, error handling ikileme gerek yok. Kayıp: type-safe, ama kendi RPC abstraction'ınıza (tRPC gibi) göre daha düşük seviyede

API Routes ve Route Handlers

Server Actions internal mutation için yeterli ama external API (webhook, mobile app backend, 3rd party entegrasyon) için Route Handler'lar gerekli. app/api/webhook/stripe/route.ts gibi:

• HTTP method fonksiyonları: export async function POST()
• Request / Response: Native Web API, Next-özgü değil
• Middleware: Auth, rate limiting, logging için middleware.ts
• Edge vs Node runtime: Edge — hızlı, global, sınırlı API'ler. Node — tam özellikli, region bazlı

Deployment: Vercel Dışında Hayat Var mı?

Vercel, Next.js'in ilk-parti hosting'i ve en sorunsuz deneyim. Ama alternatifler de olgun:

• Vercel: Sıfır konfigürasyon, ISR + edge fonksiyonlar çalışıyor. Fiyat agresif büyüyebilir
• Cloudflare Pages + Workers: Edge native, maliyet çok düşük. Bazı Next özellikleri (middleware sınırları) kıyı durumda
• AWS Amplify / SST: AWS ekosistemi tercih edenlere
• Self-hosted (Docker + VPS): Next build + node standalone mode. ISR için ek yapılandırma
• Coolify / Dokploy: Self-host'un Heroku-benzeri deneyimi

Seçim kriterleri: trafik hacmi, maliyet duyarlılığı, veri egemenliği ve ekip yetkinliği. Küçük-orta ölçek için Vercel genellikle verim-maliyet tatmin edici. Büyük ölçek self-host ROI'sini iyileştirir.

SEO: Next.js'in Güçlü Yanı

Next.js'in SEO için sağladıkları 2026 itibariyle:

• Metadata API: export const metadata veya generateMetadata ile dynamic meta
• Sitemap.ts ve robots.ts: Code tabanlı, dynamic
• Open Graph images: opengraph-image.tsx dosyası ile otomatik OG image üretimi
• JSON-LD: Schema.org structured data, component içinde
• ISR + streaming: Hem fresh hem fast — statik cache + segment-level revalidation

Performance Optimizasyonu

Next.js'in performance doğuştan iyi ama aşağıdaki noktalar sıkça atlanır:

• Image component: next/image ile otomatik sizing, lazy, AVIF/WebP
• Font optimization: next/font ile self-host, FOUT yok
• Script strategy: Analytics, 3rd party'yi afterInteractive / lazyOnload
• Parallel data fetching: Promise.all ile birden çok data source birlikte
• Partial Prerendering: Static + dynamic birlikte, Next 15+