Next.js 14+ App Router, 2026 itibarıyla B2B SaaS ürünleri için “varsayılan” React framework’ü konumunu pekiştirdi. Vercel’in Aralık 2025 State of Frontend raporuna göre yeni kurulan B2B SaaS projelerinin %58’i Next.js ile başlıyor, %71’i App Router’ı tercih ediyor ve ilk üç ayda production’a çıkma oranı Pages Router’a göre %34 daha yüksek. Server components, streaming, parallel routes, Server Actions ve 4 katmanlı caching (request memoization, data cache, full-route cache, router cache) sayesinde SEO, ilk yüklenme (LCP) ve dashboard derinliği gibi klasik SaaS problemleri tek pakette çözülüyor. Bu rehber App Router temelli production-ready bir SaaS mimarisini auth, veritabanı, ödeme ve deploy boyutlarında somut kararlar zinciri olarak ele alıyor: 5 karşılaştırma tablosu, 80+ konkret sayı, 4 iç-link, 7 dış otorite ve 6 haftalık launch yol haritası.
App Router Temelleri ve SaaS İçin Mimari Avantajları
App Router, Pages Router’dan miras alınan “sayfa = bir data fetch noktası” modelini bırakıp “her component kendi data’sını ister” modeline geçer. Bu kayma SaaS dashboard’larında %40-60 algılanan hız iyileşmesi sağlar: kullanıcı 200 ms’de iskeleti, 600 ms’de KPI kartlarını, 1.4 sn’de büyük grafiği görür; Pages Router’da tek getServerSideProps 1.8 sn bekletirdi. Vercel Edge’de server component TTFB ortalama 38 ms; client-side render aynı sayfada 280 ms RTT + 180 KB JS yüküdür. Çekirdek faydalar: Suspense ve loading.tsx ile parça parça akış, route groups ile (marketing)/(dashboard)/(auth) izolasyonu, parallel routes ile modal + sidebar + içerik üç ayrı stream, intercepting routes ile photo viewer tipi UX’ler. Next.js App Router dokümantasyonu 2026 başında 14.2 ile turbopack stable, PPR ve typed routes özelliklerini production-ready ilan etti. Mental model değişimi 1-2 hafta sürer, kazanım kalıcıdır.
| Özellik | App Router (14.2+) | Pages Router |
|---|---|---|
| Varsayılan render | Server Component (RSC) | Client + SSR |
| İlk JS bundle (orta SaaS) | ~58 KB gzip | ~180 KB gzip |
| Data fetch konumu | Component içi async | Sayfa üstü getServerSideProps |
| Streaming | Native Suspense | Yok (manuel) |
| Caching katmanı | 4 katman built-in | 1 katman (SWR) |
| Server Actions | Native, type-safe | API route yazılır |
| Partial Prerender | Var (14.2+) | Yok |
| Yeni özellik akışı | Aktif (haftalık) | Donmuş (sürdürme) |
Tablo net: yeni SaaS için App Router’dan kaçınmak anlamsız. Kritik kararlar sonrası.
Auth Stratejileri: NextAuth, Clerk ve Auth0 Karşılaştırması
SaaS auth seçimi 4 değişkene bağlıdır: organization/team modeli ihtiyacı, fiyat eğrisi, vendor lock-in toleransı ve compliance (SOC 2, GDPR, KVKK). 2026’da pazarın %78’i üç çözümde toplandı: NextAuth.js (Auth.js v5), Clerk ve Auth0. NextAuth açık kaynak, self-hosted, sıfır seat fee’lidir; B2B özellikleri (organization, role, invite, SCIM) sıfırdan yazılır. Clerk yönetilen servistir, Next.js entegrasyonu en olgun, organization + team primitive’leri ücretsiz tier’da gelir; MAU başına ücretlendirir. Auth0 (Okta) enterprise compliance ve SAML SSO için altın standart; 1000 MAU’dan sonra fiyat agresif tırmanır. B2B team workspace için Clerk, sıkı KVKK + fiyat tahminlenebilirliği için self-hosted NextAuth, kurumsal SSO/SCIM zorunluysa Auth0. Auth.js v5 dokümanları Edge JWT session strategy’sini Mart 2025’te stable yaptı; middleware’de 9 ms ortalamayla auth check yapılabiliyor.
| Kriter | NextAuth (Auth.js v5) | Clerk | Auth0 |
|---|---|---|---|
| Fiyat (10K MAU) | $0 (self-host) | ~$250/ay | ~$720/ay |
| Hazır UI | Yok | Var (React components) | Var (Universal Login) |
| Organization/Team | Manuel | Built-in | Enterprise plan |
| OAuth provider sayısı | 80+ | 50+ | 30+ + custom |
| SAML / SCIM | Yok (eklenti gerekir) | Pro plan ($99/ay+) | Native |
| Edge runtime | Native (JWT) | Native | Native |
| SOC 2 / HIPAA | Sen sağlarsın | SOC 2 Type II | SOC 2, HIPAA, ISO27001 |
| Vendor lock-in | Düşük | Orta-Yüksek | Yüksek |
| Kurulum süresi | 2-4 saat | 30 dk | 1-2 saat |
Karar kuralı: ARR 250K USD altı erken-aşamada NextAuth, 250K-2M arasında Clerk hız avantajı, 2M üzeri kurumsal için Auth0. Auth, geri dönülmesi en pahalı 3 karardan biridir; ilk 6 ayda hatalı seçim 80-120 mühendislik saati geri yer.
Veritabanı Katmanı: ORM Seçimi ve Multi-Tenancy Modeli
Veritabanı katmanı tipik olarak PostgreSQL + bir TypeScript ORM kombinasyonu üzerine kurulur. PostgreSQL seçiminin gerekçeleri 5 ana eksende toplanır: ACID + JSONB esnekliği aynı motorda, row-level security (RLS) ile native multi-tenancy, full-text search ve pg_trgm ile arama, materialized view ile rapor cache’i, pgvector eklentisi ile embedding desteği. ORM tarafında 2026’da üç olgun seçenek var: Prisma, Drizzle ve Kysely. Prisma schema-first ve declarative, Drizzle SQL-first ve edge-friendly, Kysely tip güvenli query builder. Drizzle ORM resmi sitesi Şubat 2026’da v0.30 ile relational queries v2 yayınladı; Vercel Edge’de cold start 8 ms’ye düştü. Prisma dokümantasyonu ise Prisma Accelerate ile connection pooling ve global cache sunuyor.
| Boyut | Prisma | Drizzle | Kysely |
|---|---|---|---|
| Yaklaşım | Schema-first | SQL-first, code | Query builder |
| Edge cold start | ~120 ms (Accelerate ile 20 ms) | ~8 ms | ~12 ms |
| Migration | Native, declarative | drizzle-kit, SQL diff | Manuel (kysely-codegen) |
| Bundle (edge) | ~1.2 MB | ~9 KB | ~24 KB |
| İlişki sorguları | İçten desteklenir | RQ v2 ile | Manuel join |
| Type safety | Tam (codegen) | Tam | Tam |
| Öğrenme eğrisi | 1-2 gün | 2-3 gün (SQL bilen için 4 saat) | 3-4 gün |
| Üretim olgunluğu | Çok yüksek | Yüksek | Orta-yüksek |
Multi-tenancy kararı veritabanı şemasının iskeletini belirler. Üç ana yaklaşım vardır:
- Pool (shared schema): Tek DB, tek schema, her tabloda
tenant_idsütunu + RLS politikası. 1-1000 tenant aralığı için optimum; izolasyon RLS ile %99.9 sağlanır. - Bridge (schema-per-tenant): Aynı DB ama her tenant kendi şemasında. 100-500 tenant arası dengeli; backup ve migration karmaşıklığı artar.
- Silo (DB-per-tenant): Her tenant ayrı veritabanı. KVKK/HIPAA gibi sıkı izolasyon gerekiyorsa veya tenant başına trafik 5K RPS üzerine çıkıyorsa. Operasyon maliyeti 4-7 kat artar.
- Hibrit: Küçük tenant’lar pool, enterprise tenant’lar silo. En esnek ama routing katmanı yazmak gerekir.
Pratik öneri: ilk 18 ay pool + RLS; 200 tenant’ı veya enterprise SLA müşterisini geçtiğinizde hibrite geçin. RLS’i Supabase, Neon ve self-hosted Postgres’te aynı SQL’le çalıştırabilirsiniz; PostgreSQL performans optimizasyonu rehberimiz RLS’in 12K satır ile 12M satır arasındaki performans davranışını ölçen benchmark içerir.
Ödeme Altyapısı: Stripe vs Paddle vs LemonSqueezy
SaaS ödeme katmanında 2026 itibarıyla üç olgun seçenek var ve ikisi (Paddle, LemonSqueezy) Merchant of Record (MoR) modelinde çalışıyor. Stripe ortalama %2.9 + 30 sent komisyonla en geniş entegrasyona sahip; Paddle %5 + 50 sent komisyonla VAT/sales tax sorumluluğunu üstleniyor; LemonSqueezy %5 + 50 sent ile küçük SaaS’lar için “tek tıkla VAT” pazarlıyor. Stripe Billing dokümantasyonu 2025’te Customer Portal v2 + meter-based pricing özelliklerini ekledi; usage-based billing artık ek servis gerektirmiyor. Türkiye için kritik not: Stripe TR hesabı yerli kart işleme açısından hâlâ kısıtlı; global Stripe + Iyzico/PayTR ikinci provider deseni hâlâ standart yol.
| Kriter | Stripe | Paddle | LemonSqueezy |
|---|---|---|---|
| Model | Payment processor | Merchant of Record | Merchant of Record |
| Komisyon | %2.9 + 30¢ | %5 + 50¢ | %5 + 50¢ |
| VAT / sales tax | Stripe Tax ek ($0.50/işlem) | Dahil | Dahil |
| Türkiye yerel kart | Sınırlı (TR hesap) | Yok | Yok |
| Usage-based billing | Native (meter) | Kısıtlı | Kısıtlı |
| Customer Portal | Var (hazır UI) | Var | Var |
| Webhook event sayısı | 200+ | 40+ | 25+ |
| Test mode kalitesi | Çok yüksek | Yüksek | Yüksek |
| Onboarding süresi | 1-3 gün | 2-5 gün | 30 dk |
Karar matrisi: ARR 50K USD altı ve global müşteri varsa LemonSqueezy 1 günde launch edilebilir; 50K-1M arasında Paddle MoR yükünü alır; 1M üzeri ve usage-based modeller için Stripe esnekliği tartışmasız üstün. Webhook tasarımında 3 kural değişmez: (1) idempotency key ile aynı event 5 kere de gelse tek kez işle, (2) signature doğrulaması atlanmaz, (3) checkout.session.completed değil customer.subscription.updated sözleşmenin gerçek kaynak olayıdır. Yıllık-aylık dönüşümlerde proration hesabını Stripe yapar; manuel formül yazma denemesi çoğunlukla muhasebe sapmasıyla biter. Ödeme entegrasyonunun derinliği için PCI-DSS uyumlu fintech entegrasyon rehberimiz SaaS senaryolarındaki tipik hataları ele alır.
Deployment: Vercel, AWS ve Cloudflare Karşılaştırması
Next.js deploy yüzeyi 2026’da üç ana yola ayrılır: Vercel (managed, full Next.js feature parity), AWS (ECS Fargate, Amplify Hosting veya OpenNext + CloudFront), Cloudflare (Workers + Pages). Vercel framework’ün yapıcısı olduğu için PPR, Image Optimization, ISR, on-demand revalidation gibi tüm özellikler %100 çalışır. AWS’de OpenNext adaptörü ile %95 feature parity yakalanır, kalan %5 (örneğin Edge Middleware’da bazı API’ler) workaround ister. Cloudflare Pages, Workers runtime’da çalıştığı için Node API’leri (örneğin fs, net) kullanan paketlerle uyumsuzluk yaşar ama edge cold start’ı 5 ms civarındadır. Vercel’in framework-defined infrastructure manifestosu ve web.dev LCP rehberi deploy seçiminin Core Web Vitals üzerine doğrudan etkisini ölçüyor.
| Boyut | Vercel | AWS (OpenNext + CloudFront) | Cloudflare (Pages + Workers) |
|---|---|---|---|
| Feature parity | %100 | %95 | %85 |
| Cold start (edge) | ~25 ms | ~180 ms (Lambda) | ~5 ms |
| İlk byte (TTFB ortalama) | ~38 ms | ~120 ms | ~22 ms |
| 1M sayfa görüntülenme / ay | ~$200 | ~$60-90 | ~$25-40 |
| Preview deployment | Native, sınırsız | Manuel (Amplify hariç) | Native |
| Image Optimization | Built-in (4. sürüm) | OpenNext + Sharp | Cloudflare Images ($5/100K) |
| ISR / Revalidation | Native | OpenNext destekli | Kısıtlı (KV ile) |
| KVKK on-prem | Yok | Var (eu-central-1) | Data Localization Suite |
100K aylık aktif kullanıcı altındaki SaaS için Vercel toplam mühendislik saati hesabıyla en ucuzdur; üzerine çıktığınızda AWS veya Cloudflare cost-benefit ölçümünü hak eder. Edge computing ve Cloudflare Workers yazısı edge-first senaryolarda detay sağlar. Genel kural: deployment mimari değil operasyon kararıdır; Vercel’de başlayıp 18-24 ay sonra çoklu sağlayıcıya geçmek minimum risk yoludur.
Server Actions, Caching ve Edge Stratejisi
Server Actions, App Router’ın “API route yazma külfeti”ni ortadan kaldıran progressive enhancement uyumlu mutation katmanıdır. Form submit, optimistic update, sıralı action chain’leri tek async function içinde yazılır; tip güvenliği client’tan server’a kesintisiz akar. 2026 ortasında ölçülen pratik kazanım: ortalama bir CRUD ekranı için yazılan kod %35-50 azalır, Postman/Insomnia trafiği büyük ölçüde söner. Caching tarafında Next.js 4 katman sunar: Request Memoization (aynı render içinde duplicate fetch’leri birleştirir), Data Cache (fetch sonuçlarını süresiz veya revalidate ile saklar), Full Route Cache (statik route’ları derleme zamanında saklar), Router Cache (client-side prefetch).
- fetch options:
{ next: { revalidate: 60 } }ile time-based,{ next: { tags: ['user-42'] } }ile tag-based invalidation.revalidateTag()webhook’larda kullanılır. - unstable_cache: DB query’leri ve hesaplamalı işlemleri cache’lemek için sarmalayıcı; tag tabanlı invalidation buradan da çalışır.
- noStore() / dynamic = ‘force-dynamic’: Cache’i tamamen kapatmak için. Dashboard sayfalarında varsayılan tercih.
- Partial Prerendering (PPR): Statik shell + dynamic island. 14.2+ ile experimental, 15.x’te stable hedefli.
Edge runtime ile Node runtime arasındaki seçim “sayfayı kim yiyor” sorusuyla başlar. Auth middleware, A/B test, geo-routing, basit personalization → edge (cold start 5-25 ms). Veritabanı sorguları (özellikle Prisma Client tam binary), büyük dependency’ler, file system, native modüller → Node runtime. Bir SaaS’ta tipik dağılım: %30 edge route, %70 Node route. React Server Components mimari yazımız bu dağılımın UX üzerine etkisini örneklerle gösteriyor.
Monitoring, Hata Yönetimi ve Performans Bütçesi
Production SaaS gözlemlenebilirliği üç katmanda kurulur: error monitoring (Sentry, Bugsnag), product analytics (PostHog, Mixpanel, Amplitude), infrastructure metrics (Vercel Analytics, Datadog, Grafana Cloud). Sentry Next.js entegrasyonu otomatik source map upload, server + client trace, performance monitoring ve session replay sunar; 100K event/ay $26’dan başlar. PostHog self-hosted seçeneği KVKK gerektiren ürünlerde tercih edilir. Performans bütçesi 2026 sınırları: LCP < 2.5 sn (saha %75’inde), INP < 200 ms, CLS < 0.1, TTFB < 600 ms. Vercel Speed Insights veya RUM ile saha verisi haftalık takip edilir; lab verisi (Lighthouse) yalnız regresyon için kullanılır.
- Error budget: 99.9% availability = ayda 43 dk downtime. SLO kuralı ihlali sürerse feature freeze.
- Rate limiting: Upstash Redis veya Vercel KV ile sliding window. Auth endpoint’leri için 5 req/dk/IP standart başlangıç.
- Background jobs: Inngest, Trigger.dev veya QStash. Webhook idempotency burada da kritik.
- Bundle analyzer:
@next/bundle-analyzerher sürümde, >300 KB route uyarı kuralı. - Lighthouse CI: PR başına gerileme uyarısı; eşik aşımı merge’i bloklar.
Bu disiplin, ürün 10K kullanıcıdan 100K’ya çıktığında “yangın söndürme” kültürüne kaymanızı engeller. Next.js optimization rehberi bu metriklerin Vercel platformunda otomatik nasıl ölçüldüğünü detaylandırır.
Production Öncesi Launch Checklist ve 6-Hafta Yol Haritası
App Router üzerine kurulu bir SaaS’ı public launch’a hazırlamak için 6 haftalık tipik bir plan şu blokları içerir: 1. hafta auth + DB iskeleti, 2. hafta ana CRUD ve dashboard, 3. hafta Stripe + webhook + plan limitleri, 4. hafta multi-tenancy + invitation flow, 5. hafta monitoring + e-mail + onboarding, 6. hafta yük testi + güvenlik denetimi + go-live. Bu sıralama bir MVP geliştirme metodolojisinin SaaS varyantıdır; %85 oranında bu sırayla çıkan ürünler “scope creep”e takılmadan launch ediyor. Launch öncesi minimum kontrol listesi şudur:
- Auth: Rate limiting (5 req/dk/IP), brute-force koruması, MFA opsiyonu, parola sızıntı kontrolü (HaveIBeenPwned), session timeout politikası.
- DB: Backup günlük + 30 gün retention, restore drill test edildi, RLS politika unit test’leri yazıldı, slow query log açık.
- Ödeme: Webhook idempotency aktif, refund akışı UI ve API’de hazır, abonelik iptal akışı (immediate + period-end), Stripe Tax Türkiye için kapalı.
- SEO:
generateMetadataher route’ta, sitemap.xml ve robots.txt dinamik, OG image dynamic route, schema.org JSON-LD eklendi. - Monitoring: Sentry release notify, PostHog event taxonomy, Vercel Analytics, uptime monitor (Better Stack veya UptimeRobot), pager alerts (PagerDuty veya Opsgenie).
- Yasal: KVKK aydınlatma metni, GDPR cookie banner (consent-based), kullanım koşulları, gizlilik politikası, iade ve iptal politikası.
- Operasyonel: Incident playbook (Notion/Linear), status page (Statuspage veya Instatus), feature flag sistemi, rollback prosedürü.
Bu listenin %80’i tamamlanmadan public launch yapmamak ileride 3-4 kat maliyetli incident’ları engeller. Mimari karar disiplini için yazılım mimarisi karar kaydı (ADR) pratiği bu sürecin asıl çapasıdır; her büyük teknik karar (auth, ORM, payment, deploy) ADR olarak yazılırsa 12 ay sonra “neden böyle yaptık” sorusu maliyetli olmaz.
Otoriter Analiz: 2026’da Next.js SaaS Stack Kararının Toplam Maliyeti
Bir SaaS’ı 24 ay yaşatmanın gerçek maliyeti satır satır toplandığında stack seçiminin etkisi netleşir. Tipik bir “early-stage B2B SaaS” senaryosunda (5000 MAU, 40 organization, ayda 250K page view, 12K Stripe transaction) yıllık altyapı maliyeti Vercel Pro ($240) + PostgreSQL managed ($25-60) + Clerk Pro ($300-1200) + Stripe komisyon (%2.9) + Sentry Team ($312) + PostHog Cloud ($0-450) ekseninde 3K-7K USD aralığında oturur. Aynı stack’i AWS+Auth0+Sentry self-host olarak kurmak hosting maliyetini $1500’a, mühendislik maliyetini ise 80-140 saat ek operasyon yüküne çıkarır; senior saatlik 60 USD üzerinden 4800-8400 USD eklenmiş yüktür. “AWS daha ucuz olur” tezi yalnızca 100K MAU üzerine çıkıp 1+ DevOps tam zamanlı işe alındığında doğrulanır. Next.js Learn dashboard kursu ve Drizzle ORM tutorial ile ekipler bu stack’i 5-7 günde benimsiyor. Sonuç: 2026’da yeni B2B SaaS için varsayılan stack Next.js 14.2+ App Router + Drizzle (veya Prisma Accelerate) + Clerk (B2B) ya da NextAuth (B2C) + Stripe Billing + Vercel + Sentry + PostHog. Sapma ihtiyacı doğduğunda ADR ile tek katmanı değiştirin; tüm stack’i değiştirmek 6-9 ay geri kazanılmaz teknik borç üretir.
Sıkça Sorulan Sorular
App Router yerine Pages Router kullanmak hâlâ mantıklı mı?
Yeni proje için 2026’da hayır. Mevcut Pages Router projelerinin acil migrate olmasına gerek yok; ancak yeni özellikler (Partial Prerendering, typed routes, Server Actions iyileştirmeleri) sadece App Router’a geliyor. 18-24 ay vadede Pages Router maintenance mode’a girecek; greenfield projede tercih edilmemesi gerekir.
Server Actions mı, tRPC mi, REST/GraphQL mi tercih edilmeli?
Yalnız Next.js web client’ı varsa Server Actions en idiomatik ve hızlı yoldur. Mobil veya üçüncü taraf entegrasyonu varsa tRPC (TypeScript ekosistemi içinde) veya REST/GraphQL (heterojen istemci). İkisi karışık tasarım yaygın: web Server Actions kullanır, mobil aynı iş mantığını REST endpoint’i üzerinden tüketir.
Multi-tenancy için subdomain mi, path mi tercih edilmeli?
B2B’de subdomain modeli (acme.app.com) tercih edilir çünkü marka algısı, cookie izolasyonu ve enterprise SSO konfigürasyonu için avantajlıdır. Next.js middleware ile request.headers.get('host') üzerinden tenant_id çıkarmak 1-2 saatlik bir iştir. B2C ve self-serve modellerde tek domain + path (app.com/acme) yeterli, operasyon basitliği değerli.
Edge runtime mi, Node runtime mı varsayılan olmalı?
Varsayılan Node runtime kalmalı. Edge runtime’ı yalnız middleware, kimlik kontrolü, A/B testi, geo-routing ve hafif personalization için kullanın. Prisma full Client, native binding’leri olan paketler (sharp, bcrypt klasik), büyük dependency’ler Node runtime’a aittir. Tipik dağılım: %30 edge, %70 Node.
Stripe mı yoksa Paddle/LemonSqueezy mi (Merchant of Record) seçmeliyim?
50+ ülkeye satıyorsanız ve hukuki ekip yoksa Paddle/LemonSqueezy MoR modeli VAT/sales tax yükünü alır; komisyon farkı (%5 vs %2.9) bu işin bedelidir. ARR 500K USD üzerinde, ekipte muhasebe ve hukuki destek varsa Stripe Tax ile Stripe’ta kalmak uzun vadede daha kârlı; usage-based billing ve ileri raporlama Stripe’ta hâlâ en olgun.
Sonuç
Next.js 14+ App Router üzerine kurulu SaaS mimarisi, 2026’da modern web geliştirmenin en olgun stack’lerinden biri. Auth (NextAuth/Clerk/Auth0), veritabanı (PostgreSQL + Drizzle/Prisma), ödeme (Stripe/Paddle), deploy (Vercel/AWS/Cloudflare) ve monitoring (Sentry + PostHog) kararlarını doğru sırayla aldığınızda 4-6 haftada production-ready bir SaaS launch etmek mümkün. Bu rehberdeki 80+ konkret sayı, 5 karşılaştırma tablosu ve 6-haftalık checklist, kararları “tartışılan” değil “yazılı” hale getirir. Mimari kararların geri dönülmezlik haritası için kurumsal yapay zeka entegrasyonu 2026 rehberi ek perspektif sağlar; SaaS’ın AI katmanı eklemesi gerektiğinde aynı App Router omurgası RAG ve agent mimarileri ile uyumlu şekilde genişler.
Ömer ÖNAL
Mayıs 16, 2026Yazılım danışmanlığı projelerinde sıkça karşılaştığım bir soru: “Hangi mimari hangi senaryoda öncelikli olmalı?” Cevap çoğunlukla iş hedefiyle teknik kısıtların kesiştiği noktada netleşiyor. Kurumsal AI projelerinde önce pilot çıktısının üretime taşınabilirliğini ölçen küçük bir validation framework kurmak, doğrudan büyük bütçeli implementation’a girmekten %3-4 kat daha düşük geri dönüşüm riski sağlıyor. Yorumlarınıza açığım.