> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# Next.js ve Expo ile Web + Mobil SaaS Nasıl İnşa Edilir (Monorepo Rehberi)

Çoklu platform SaaS mimarisi kılavuzu: pnpm monorepo içinde Next.js 16 ve React Native Expo'yu Better Auth ve Drizzle ORM ile ortaklaşa yapılandırma adımları.

_Yayınlandı 2026-11-06._
_2026-11-06 tarihinde güncellendi._

> **Next.js ve Expo tek bir monorepo içinde nasıl kod paylaşır?**
> Bu modül sınırlarınıza ve paketleyici yapılandırmanıza bağlıdır. En güvenilir yöntem, pnpm ve Turborepo kullanarak veri tabanı modellerini, doğrulamaları ve API sözleşmelerini bağımsız iç paketlerde toplamaktır. Next.js 16 sunucusu Drizzle ORM'i doğrudan PostgreSQL üzerinde çalıştırırken, Expo mobil uygulaması tipleri tanımlı HTTP uç noktalarıyla haberleşir ve oturum anahtarlarını expo-secure-store ile saklar. supastack, Metro ile Turbopack arasında çakışma yaşanmayacak şekilde bu yapıyı hazır sunar.

## Çoklu Platform SaaS Projelerinin En Zor Yanı: Paketleyici Uyuşmazlığı

Her girişimci, mobil uygulamaların anlık bildirimler ve ana ekranda yer alma avantajıyla kullanıcı bağlılığını büyük oranda artırdığını bilir. Fakat Next.js ile React Native Expo'yu aynı depoda buluşturmak çoğu zaman karmaşık sorunlara yol açar.

Next.js, Node ve Edge ortamları için Turbopack veya Webpack'e dayanırken; Expo, React Native için Metro paketleyicisini kullanır. Dikkatsizce paylaşılan kodlar hatalara neden olur: Metro, Node'a özgü `crypto` modüllerini çalıştırmaya kalkarken, Turbopack mobil JSX sözdiziminde takılır. Çözüm katı paket izolasyonundan geçer.


## Modüler Ortak Paketlerin Tasarımı: Auth, Şema ve Sözleşmeler

Ölçeklenebilir bir monorepo yapısında son uygulamalar (`apps/web` ve `apps/mobile`) yalnızca ince birer arayüz katmanıdır. İş mantığı ve veri tanımları `packages/` altındaki iç paketlerde yer almalıdır:

`@supastack/db`: Drizzle ORM tablo tanımlarını ve geçiş dosyalarını tutar. Veri tabanına yalnızca sunucu bağlanır; istemciler yalnızca türetilen TypeScript tiplerini içeri aktarır.

`@supastack/auth`: Better Auth'u yapılandırır ve iki giriş noktası sunar: sunucu rotaları ve hem web hem mobil tarafından çağrılan istemci SDK'sı.

`@supastack/config`: Derleme anında Zod kullanarak ortam değişkenlerini doğrular ve eksik ayarlardan kaynaklanan çalışma zamanı çökmelerini önler.

```
// packages/auth/src/client.ts
import { createAuthClient } from "better-auth/react";
import { expoClient } from "@better-auth/expo/client";

export function createCrossPlatformAuthClient(baseURL: string, storage?: any) {
  return createAuthClient({
    baseURL,
    plugins: storage ? [expoClient({ scheme: "myapp", storage })] : [],
  });
}
```


## Birleşik Kimlik Doğrulama: Web'de Çerezler, Mobilde SecureStore

Web ve mobil ortamlar farklı oturum mekanizmaları gerektirir. Tarayıcıda Next.js, HTTP-only ve `SameSite=Lax` çerezleri kullanarak CSRF koruması ve sunucu bileşeni senkronizasyonu sağlar.

Mobil cihazlarda ise çerezler WebView yapılarında güvenilir değildir. Expo uygulaması OAuth veya sihirli bağlantı sonrası bir Bearer oturum belirteci alır ve bunu `expo-secure-store` ile iOS Keychain veya Android Keystore içinde saklar. Mobil istekler `Authorization: Bearer <token>` başlığıyla iletilir ve ortak Better Auth ara yazılımı tarafından doğrulanır.


## CI/CD ve Yayın Süreçleri: Vercel, EAS Build ve Versiyon Uyumu

Web ve mobil projelerini tek bir depoda tutmak, sürümlerin eşzamanlı yayınlanmasını sağlar. `@supastack/db` üzerinde bir geçiş birleştirildiğinde, Next.js arka ucu Vercel veya Cloud Run üzerinde saniyeler içinde güncellenir.

Aynı anda Expo Application Services (EAS Build), Apple TestFlight ve Google Play için yerel paketleri derler. Monorepo içinde paylaşılan paket sürümlerini kilitleyerek, ayrı depoların sebep olduğu sürüm uyumsuzluklarının önüne geçersiniz.