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

Ç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.