> ## 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

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

Praktijkgids voor cross-platform SaaS: Next.js 16 en React Native Expo combineren in een pnpm-monorepo met gedeelde Better Auth en Drizzle ORM.

_Gepubliceerd 2026-11-06._
_Bijgewerkt op 2026-11-06._

> **Hoe deelt u code tussen Next.js en Expo binnen een monorepo?**
> Dat hangt af van uw modulegrenzen en bundler-instellingen. De meest betrouwbare methode gebruikt pnpm en Turborepo om datamodellen, validaties en API-contracten te isoleren in losse interne pakketten. De Next.js 16 server voert Drizzle ORM rechtstreeks uit tegen PostgreSQL, terwijl de Expo-app via getypeerde endpoints communiceert en tokens bewaart via expo-secure-store. supastack biedt deze opzet kant-en-klaar zonder conflicten tussen Metro en Turbopack.

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