Een Web- en Mobiele SaaS bouwen met Next.js en Expo (Monorepo-gids)

De grootste uitdaging bij cross-platform SaaS: Bundler-conflicten

Iedere ondernemer weet dat een mobiele app gebruikersactiviteit en retentie vergroot via pushberichten en aanwezigheid op het startscherm. Toch is het combineren van Next.js en React Native Expo in één monorepo berucht om zijn complexiteit.

Next.js leunt op Turbopack of Webpack in Node- en Edge-omgevingen, terwijl Expo de Metro-bundler voor React Native gebruikt. Onzorgvuldig code delen leidt tot fouten: Metro probeert Node-modules zoals crypto te verwerken, terwijl Turbopack vastloopt op mobiele JSX-syntaxis. Een duidelijke pakketstructuur lost dit probleem op.

Modulaire pakketten opzetten: Auth, schema's en contracten

In een schaalbaar monorepo zijn de eindapplicaties (apps/web en apps/mobile) louter presentatielagen. Bedrijfslogica en definities horen thuis in interne pakketten onder packages/:

@supastack/db: Bevat Drizzle ORM-tabellen en migraties. Alleen serveromgevingen verbinden met de database; clients gebruiken uitsluitend de geëxporteerde typen.

@supastack/auth: Configureert Better Auth met twee ingangen: server-routes voor het backend en een SDK die zowel door Web als Mobiel wordt aangeroepen.

@supastack/config: Controleert omgevingsvariabelen tijdens de compilatie met Zod om runtime-fouten door ontbrekende instellingen te voorkomen.

// 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 })] : [],
  });
}

Gedeelde authenticatie: Cookies op het Web, SecureStore op Mobiel

Web en mobiele apparaten vereisen verschillende sessietechnieken. In de browser plaatst Next.js HTTP-only cookies met SameSite=Lax, wat automatische CSRF-bescherming en probleemloze serverrendering biedt.

Op mobiele toestellen zijn cookies minder betrouwbaar in WebViews. De Expo-app vangt na de OAuth-aanmelding een Bearer-token op en bewaart dit via expo-secure-store in de iOS Sleutelhanger of Android Keystore. Mobiele verzoeken sturen de header Authorization: Bearer <token> mee, die door de Better Auth middleware wordt gecontroleerd.

CI/CD en releasematrix: Vercel, EAS Build en versiebeheer

Door Web en Mobiel in één repository te beheren, verlopen releases synchroon. Wanneer een migratie in @supastack/db wordt samengevoegd, rolt de Next.js-backend binnen enkele ogenblikken uit op Vercel of Cloud Run.

Tegelijkertijd compileert Expo Application Services (EAS Build) de installatiebestanden voor Apple TestFlight en Google Play. Omdat gedeelde pakketversies in het monorepo op elkaar zijn afgestemd, voorkomt u de versieconflicten van gescheiden projecten.