Next.js ile B2B SaaS nasıl kurulur: 2026 üretim rehberi

ÖzetNext.js 16 App Router, B2B SaaS için hâlâ en dengeli seçenek: server components + streaming ile veri katmanını edge'e ittiriyor, Turbopack dev velocity'yi koruyor, Docker + Cloudflare deployment üretim maliyetini kontrol altında tutuyor. Zorluk: server/client component sınırı ve auth boundary. Bu rehber Moditra'da uyguladığımız kalıpların özeti.

Türkiye'de "Next.js ajansı" arayan ekiplerin çoğu B2B SaaS inşa ediyor — çok rollü panel, gerçek zamanlı özellikler, karmaşık yetkilendirme. Next.js 16 bu senaryoya çok iyi uyuyor ama defaults'unu bilmezseniz üç ay sonra çalışamayan bir kod tabanına dönüyor.

Bu rehber, Moditra ve diğer B2B SaaS projelerinden çıkardığımız üretim kalıplarının özeti.

Neden Next.js 16 (ve neden değil)

Next.js 16'yı B2B SaaS için tercih ediyoruz çünkü:

• App Router + React Server Components veri katmanını sunucuya iterek client bundle'ı yarıya indiriyor.
• Streaming ile ilk paint (LCP) 800ms altına düşüyor — panel yüklenirken KPI kutuları veriyle beraber sıralı geliyor, kullanıcı boş ekran görmüyor.
• Turbopack dev sunucusu artık stabil; 500+ dosyalık monorepo'da HMR aşağı yukarı Vite kadar hızlı.
• Ecosystem: shadcn/ui, Better Auth, Drizzle ORM, TanStack Query hep battle-tested Next.js recipe'leriyle çalışıyor.

Next.js kullanmayacağımız senaryolar:

• Sadece marketing sitesi + blog → Astro (JS payload'ı sıfıra yaklaşıyor, LCP 30-50% daha iyi).
• Consumer conversion funnel + KB başına önemli bundle → SvelteKit.
• Zaten deeply invested TanStack (Query + Router + Form) → TanStack Start.

App Router mimari kararları

Route grup ayrımı: marketing sayfalarını (seo) grubunda, uygulama sayfalarını (app) veya (dashboard) grubunda tutun. Layout hierarchy farklı — marketing tarafında site header + footer, app tarafında sidebar

• topbar. Aynı app/ altında ama farklı UI shell.

Server vs client boundary: varsayılan olarak her component server component. "use client" sadece etkileşim gerçekten gerektiğinde. Panel sayfalarında client component sayısı toplam component'in ~%20-30'unu geçmemeli — bu oran şişerse edge'e itmenin faydası kayboluyor.

Data fetching: async server component + await fetch(). RSC cache'i inline (fetch memoization) ile per-request dedup halloluyor. Global cache (unstable_cache veya React cache) sadece cross-request cache'lenmesi gereken yerlerde.

Auth katmanı — Better Auth + service-layer boundary

Better Auth v1, 2026 itibarıyla Türkiye pazarında en dayanıklı çözüm: NextAuth'ın karmaşıklığı olmadan, Clerk'in vendor lock-in'i olmadan. Postgres + Drizzle üzerinde kendi session tablonuz.

Kritik kural: auth check'i route handler'da değil, service layer'da yap. Moditra'da her business logic fonksiyonu actorUserId alıyor ve içinde yetkilendirme yapıyor. Route handler'lar 20 satır — sadece istek alıp servisi çağırıyor.

Neden? B2B SaaS'te en pahalı bug sınıfı auth deliği. Route'ta check yapmak "her seferinde kontrol et" demek. Service'te check yapmak "kontrol fonksiyonun kendisi" demek. Yeni bir route eklerken auth'u unutamıyorsun çünkü servis kendisi enforce ediyor.

Detaylı desen: B2B SaaS için tasarım postumuz.

Veritabanı katmanı — Drizzle ORM + PostgreSQL

Prisma yerine Drizzle tercih ediyoruz çünkü:

• Zero runtime overhead. Prisma Client dev'de fazladan hosting maliyeti yaratıyor, prod'da hâlâ hız avantajı var.
• SQL'e yakın API. Kompleks JOIN'ler için CTE + subquery yazmak Drizzle'da Prisma'dan çok daha okunabilir.
• Postgres-native tipleri (JSONB, arrays, custom enums) first-class.

Migration stratejisi: drizzle-kit generate ile SQL migration'ları üretmek, drizzle-kit migrate ile prod'a uygulamak. Prisma'nın "reset DB, run seed" ergonomi tuzağına düşmemek.

Real-time — Server-Sent Events, WebSocket değil

Moditra'da real-time için WebSocket yerine SSE tercih ettik. Nedenleri:

• WebSocket-capable reverse proxy setup fazladan complexity yaratıyor (Cloudflare için özel config gerekli).
• SSE HTTP long-polling üzerine. Mevcut auth cookie + nginx / Cloudflare proxy zincirini olduğu gibi kullanıyor.
• Debug için curl yeterli — WebSocket için wscat + custom auth handshake yazmak zorunda kalmıyorsun.

Client-to-server iletişim normal POST endpoint'ler üzerinden. 25 saniyede bir heartbeat yolluyoruz — proxy timeout'larını önlemek için.

Deploy — Docker standalone + Cloudflare edge

Neden Vercel değil: Vercel harika ama fiyatlandırma B2B SaaS büyüdükçe ısırıyor. Serverless function invocation başına ücret + bandwidth başına ücret + edge function ücreti üst üste birikince aylık $500'ün üstüne çıkabiliyor.

Bizim stack'imiz: Next.js standalone output → Docker image → Natro VPS veya DigitalOcean droplet. Önünde Cloudflare (edge cache + WAF + HSTS preload). Deploy git push origin main + GitHub Actions.

Aylık maliyet: bir orta ölçek B2B SaaS için $12-40 arası, Vercel'in ~%10'u.

Performance defaults

Next.js 16'nın nice defaults'u:

• output: "standalone" — Docker image'ı yarıya indiriyor.
• compress: true — brotli + gzip otomatik.
• poweredByHeader: false — küçük ama nötr X-Powered-By leak'i keser.
• images.formats: ["image/avif", "image/webp"] — modern format serve.
• experimental.reactCompiler: true (16 stable) — memo/callback ihtiyacını otomatik hallediyor.

Zorluklar (gerçek üretim ağrıları)

• Server/client boundary şaşkınlığı: ilk 2 hafta yeni developer'lar hangi component'i hangi tarafta bekleyeceklerini karıştırıyor. TypeScript yakalamıyor, sadece hydration hatası ile geliyor.
• Cookie collision cross-env: staging + prod aynı root domain üzerinde çalışıyorsa session cookie'leri çakışabiliyor. Env-driven cookie name prefix çözüm.
• RSC cache invalidation: revalidatePath + revalidateTag doğru yerlerde çağrılmazsa stale data servis ediliyor. Server actions'ın ardından explicit revalidate — 90% bug bu yüzden.

İlgili VakaModitra — B2B Modelist Atölye SaaS PlatformuModitra · SaaS Platformu / UI / UX · 2026Vaka çalışmasını oku →

Next.js 16 ile B2B SaaS kurmayı düşünüyor veya mimari kararlarda takıldıysanız, iletişime geçin — Moditra'daki üretim kararlarımızı sizin projeye uygun şekilde çeviririz.