Teknik Altyapımız: Meraklısına

Bu yazı teknik detaylarla ilgilenenler için. CTO'lar, teknik kurucu ortaklar, geliştiriciler — buyurun.

Stack Özeti

Neden bu seçimler? Açıklayalım.

Next.js 16: Neden Hâlâ Next?

React ekosisteminde seçenek çok: Remix, Astro, SvelteKit, Nuxt...

Next.js'i seçmemizin nedeni:

App Router & Server Components

React Server Components production-ready. Client bundle küçülüyor, initial load hızlanıyor. "use client" direktifi ile granular kontrol.

Partial Prerendering (PPR)

Next.js 16 ile gelen PPR, static shell + dynamic holes konsepti. Header/footer statik, kullanıcıya özel alanlar dinamik. Best of both worlds.

Server Actions

Form handling artık API route yazmadan. Type-safe, progressive enhancement destekli. useActionState ile optimistic UI.

Turbopack

Dev server artık saniyeler içinde ayağa kalkıyor. HMR millisaniye seviyesinde.

TypeScript: Strict Mode Zorunlu

strict: true olmadan TypeScript yazmanın anlamı yok.

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
}

Runtime hatalarının %80'ini compile time'da yakalıyoruz. Refactoring güvenli. IDE desteği maksimum.

Tailwind v4: CSS'e Dönüş

Tailwind v4 ile tailwind.config.js gitti, CSS'e döndük.

@theme {
  --color-primary: #E5442C;
  --color-secondary: #041017;
  --font-family-sans: "Manrope", system-ui, sans-serif;
}

Avantajlar

• Native CSS cascade layers — Specificity savaşları bitti
• Lightning CSS — Build süresi yarıya indi
• CSS variables everywhere — Runtime theme switching mümkün

Design tokens Figma'dan direkt CSS'e. Tek kaynak, senkronizasyon sorunu yok.

PostgreSQL: Boring Technology

Database seçiminde "boring" iyidir.

• 30+ yıllık battle-tested teknoloji
• JSONB ile document store ihtiyacı karşılanıyor
• Full-text search built-in
• Row-level security ile multi-tenant mimari

NoSQL hype'ına kapılmıyoruz. İlişkisel veri ilişkisel database'de durur.

Prisma + Zod: Type Safety End-to-End

// Schema'dan Zod validator'a
const UserSchema = z.object({
  email: z.string().email(),
  name: z.string().min(2),
});

// Aynı type frontend'de de backend'de de
type User = z.infer<typeof UserSchema>;

Database'den UI'a kadar tek bir type tanımı. Runtime validation + compile time checking.

TurboRepo: Monorepo Done Right

Çoklu uygulama projelerinde (web + admin + API) TurboRepo kullanıyoruz.

apps/
  web/          # Public website
  admin/        # Admin panel
  api/          # Backend API (opsiyonel)
packages/
  ui/           # Shared components
  config/       # ESLint, TypeScript configs
  db/           # Prisma schema & client

Neden Monorepo?

• Shared code — UI components, types, utils tek yerde
• Atomic changes — API değişikliği + frontend güncellemesi tek commit
• Build caching — Değişmeyen paketler rebuild edilmez

Coolify: Self-Hosted Vercel

Vercel pahalı. Özellikle Türkiye'den faturalama zor.

Coolify ile kendi Vercel'imizi çalıştırıyoruz:

• Git push deploy — Main'e push, otomatik build
• Preview deployments — PR'lar için geçici URL
• Zero-downtime deploy — Blue-green deployment
• SSL otomatik — Let's Encrypt entegrasyonu

VPS üzerinde, maliyetin onda biri.

Cloudflare: Edge'de Güç

Tüm projeler Cloudflare arkasında:

• DNS — Anycast, global propagation
• CDN — Static asset'ler edge'de cache
• WAF — Bot protection, DDoS mitigation
• R2 — S3-compatible storage

Cloudflare Workers ile edge computing de mümkün, ama henüz standart stack'e eklemedik.

Creative Coding Stack

Standart web sitelerinin ötesinde, deneyimsel projeler için:

Performans Dengesi

Creative ≠ yavaş.

• Lighthouse 90+ hedefi creative projelerde de korunur
• prefers-reduced-motion desteği
• Progressive enhancement — JS olmadan da çalışır
• Code splitting — Ağır kütüphaneler lazy load

DevOps Pratikleri

CI/CD Pipeline

# Her PR'da
- Type check (tsc --noEmit)
- Lint (ESLint + Prettier)
- Unit tests (Vitest)
- Build check

# Main'e merge'de
- Production build
- Deploy to Coolify
- Smoke tests

Monitoring & Backup

Projenin ihtiyacına göre belirlenir:

• Uptime monitoring — Downtime anında bildirim
• Error tracking — Production hatalarını yakalama
• Analytics — Privacy-friendly seçenekler
• Backup — Günlük/haftalık, ihtiyaca göre retention süresi

Güvenlik Yaklaşımı

Varsayılan Güvenli

• CSP headers — XSS koruması
• CORS — Strict origin policy
• Rate limiting — API abuse prevention
• Input validation — Zod ile her endpoint'te

Authentication (Gerektiğinde)

• Session-based authentication — JWT değil, server-side session tercihimiz
• Argon2 — Password hashing
• TOTP — 2FA desteği

Secrets Management

• Environment variables, .env dosyaları repo'da yok
• Production secrets Coolify'da encrypted

Neden Bu Stack?

1. Derinlik > Genişlik

10 framework bilmek yerine, bir framework'ü 10 farklı şekilde kullanmayı tercih ediyoruz.

2. Proven Technology

Her parça production'da test edilmiş. Bleeding edge değil, leading edge.

3. Developer Experience

Type safety, hot reload, good tooling. Mutlu developer = kaliteli kod.

4. Escape Hatches

Stack'e kilitli değiliz. Next.js yarın ölse, React bilgisi kalır. PostgreSQL universal.

Sonuç

Bu stack "en iyi" değil. Ama bizim için en verimli.

Her teknolojiyi yıllardır kullanıyoruz. Tuzakları biliyoruz, best practice'leri uyguladık, optimizasyon noktalarını bulduk.

Müşterilerimiz bunları bilmek zorunda değil. Ama merak edenler için: işte bu.