Unified Stack Architecture: Building Cross-Platform B2B SaaS with Next.js 15 and React Native

Key Takeaways

• Unified Stack Defined: Leverage a single TypeScript codebase within a monorepo (e.g., Turborepo) to build both a Next.js 15 web application and a React Native mobile app. This drastically reduces code duplication and streamlines development.
• The Core: Shared Logic: Abstract business logic, API clients (like tRPC), type definitions, and state management into shared packages. A change in validation rules or an API endpoint is made once and instantly reflects on both platforms.
• Next.js 15 for Web: Utilize Server Components for highly performant, data-heavy B2B dashboards. Leverage Partial Prerendering (PPR) and advanced caching to deliver an exceptional user experience on the web.
• React Native for Mobile: Consume the shared logic to build a true native mobile experience. This architecture is ideal for B2B use cases requiring offline capabilities, push notifications, and access to native device features.
• Lower Total Cost of Ownership (TCO): A unified stack significantly reduces development and maintenance costs by eliminating the need for separate web and mobile teams, simplifying bug fixes, and accelerating feature parity across platforms.
• Built-in DPDP Compliance: Centralize consent management and data governance logic in the shared layer, ensuring consistent compliance with regulations like India's DPDP Act 2023 across all user touchpoints.

The Modern B2B SaaS Dilemma: Web vs. Mobile Schism

For any modern B2B SaaS platform, the user experience is no longer confined to a desktop. Decision-makers view dashboards on their laptops, while field agents update statuses from their mobile devices. This necessitates a robust, feature-rich web application and a fluid, performant native mobile app.

Traditionally, this meant building two separate applications. A React/Vue/Angular team for the web, and a Swift/Kotlin/React Native team for mobile. The result?

• Duplicated Business Logic: Validation rules, API calls, and state management are written twice.
• Divergent Roadmaps: Feature parity becomes a constant, expensive battle.
• Increased TCO: Higher development headcount, longer timelines, and double the maintenance overhead.
• Inconsistent User Experience: Subtle differences in logic and UI creep in, frustrating users.

The rise of mature tooling and frameworks like Next.js 15, React Native, and monorepo managers like Turborepo presents a superior paradigm: the Unified Stack Architecture. This guide provides a technical blueprint for architecting a B2B SaaS platform that shares a single TypeScript codebase for both web and mobile, delivering unparalleled efficiency without compromising on performance or user experience.

Core Principles of a Unified Next.js + React Native Architecture

The foundation of this architecture is the monorepo—a single repository containing multiple projects and packages. This structure is the key to enabling code sharing and centralized management.

The Monorepo Strategy: Turborepo for Speed

While tools like Nx and Lerna are viable, we recommend Turborepo for its high-performance remote caching and simplified configuration. Your monorepo structure would look like this:

/my-b2b-saas
├── apps
│   ├── web           // Next.js 15 App
│   └── mobile        // React Native (Expo) App
├── packages
│   ├── ui            // Shared, headless UI components
│   ├── shared-logic  // Core business logic, types, validation
│   └── api-client    // Type-safe API client (e.g., tRPC)
├── package.json
└── turborepo.json

This structure clearly separates the applications (apps) from the reusable code (packages). Turborepo understands the dependency graph, so if you change a function in shared-logic, it knows to only rebuild the web and mobile apps that depend on it.

The Shared Logic Layer (/packages/shared-logic)

This is the brain of your application. It contains platform-agnostic code that can be imported and used anywhere.

• TypeScript Types: Define all your core data structures here (User, Invoice, Project, etc.). This guarantees type safety across the entire stack.
• Validation: Use libraries like Zod to define validation schemas. The same schema can validate a form on the Next.js web app and an input on the React Native mobile app.
• State Management: Employ a lightweight, framework-agnostic state manager like Zustand or Jotai. You can define stores and hooks in the shared package and import them into your components, ensuring consistent state representation.
• Utilities: Common functions for date formatting (date-fns), currency calculations, or permission checks reside here.

The API Client Layer (/packages/api-client)

To avoid duplicating fetch calls and manually typing API responses, a type-safe client is non-negotiable. tRPC (TypeScript Remote Procedure Call) is an excellent choice.

1. Define Your Router: In your Next.js app (which serves as the backend), you define your API procedures using Zod for input validation.
2. Export Type Definitions: The tRPC router automatically generates a type definition.
3. Create a Shared Client: In the api-client package, you create a tRPC client that consumes this type definition.
4. Consume Across Platforms: Both your Next.js frontend components and your React Native screens can now import and use this client, getting full IntelliSense and compile-time error checking for API calls.

// Example: packages/api-client/index.ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../../apps/web/src/server/api/root'; // Import type from backend

export const api = createTRPCReact<AppRouter>();

The UI/Component Layer (/packages/ui)

Sharing UI is the most challenging part due to fundamental differences between DOM (web) and native views (mobile). The key is to separate logic from presentation.

• Headless Components: Use libraries like Radix UI or React Aria. These provide accessibility and state management for components like dropdowns, dialogs, and toggles, but without any styling.
• Platform-Specific Extensions: Create two files for each component: Button.web.tsx and Button.native.tsx. The build tool (Metro for React Native, Webpack/Turbopack for Next.js) will automatically pick the correct file.
• Universal Styling: Use a library like NativeWind, which brings the power of Tailwind CSS to React Native. You can define your design system in tailwind.config.js and use the same class names (className="bg-blue-500 p-4") on both platforms.

Architecting the Next.js 15 Web Application

The apps/web directory houses your Next.js 15 application. This is the primary interface for power users, administrators, and anyone needing a rich, desktop-class experience.

Leveraging Server Components for B2B Dashboards

B2B dashboards are notoriously data-heavy. React Server Components (RSC), a cornerstone of the Next.js App Router, are a game-changer here.

• Zero Client-Side JavaScript: A component that fetches and displays data can be a Server Component. It runs exclusively on the server, fetches data directly from the database, and sends pure HTML to the client. This drastically reduces the initial JavaScript bundle size and improves Time to Interactive (TTI).
• Direct Data Access: Server Components can be async and directly access your database or other server-side resources. This simplifies data fetching logic and eliminates the need for client-side API waterfalls.

Type-Safe APIs with React Server Actions

Server Actions allow you to define server-side functions that can be called directly from client components. When combined with tRPC or used standalone, they provide a seamless, type-safe way to handle mutations.

// apps/web/app/invoices/actions.ts
'use server';

import { z } from 'zod';
import { db } from '@/server/db';
import { invoiceSchema } from 'packages/shared-logic/schemas';

const createInvoiceSchema = invoiceSchema.omit({ id: true });

export async function createInvoice(data: z.infer<typeof createInvoiceSchema>) {
  // Zod validation runs on the server
  const validatedData = createInvoiceSchema.parse(data);
  
  // Directly interact with the database
  const newInvoice = await db.invoice.create({ data: validatedData });
  return newInvoice;
}

This action can now be called from a form in a client component with complete type safety.

Authentication and Session Management

For a unified stack, use a token-based strategy (JWT).

• Web: Store the JWT in a secure, httpOnly cookie. This is the most secure method for browsers as it prevents access from client-side JavaScript (XSS attacks). NextAuth.js is an excellent library for managing this.
• Mobile: Store the JWT in a secure, encrypted storage solution like expo-secure-store or MMKV. httpOnly cookies are not a concept in the native mobile world.

The authentication endpoint can be a single Server Action or API route in Next.js that issues the token, which is then handled differently by each client.

Architecting the React Native Mobile Application

The apps/mobile directory contains your React Native application, likely bootstrapped with Expo for a superior developer experience.

Consuming Shared Logic for Offline-First B2B Apps

Many B2B mobile use cases (e.g., field service, logistics) require offline functionality. Your unified architecture makes this much more manageable.

• Consistent State: The shared Zustand store can be hydrated with data fetched from the API.
• Offline Persistence: Use a persistence middleware for Zustand (like zustand-persist) with a fast storage engine like MMKV. When the user is offline, the app reads from and writes to local storage.
• Synchronization Logic: When connectivity is restored, a synchronization service can compare the local state with the server state and push/pull changes. The core business logic for this reconciliation lives in shared-logic, making it testable and reusable.

Code Push and Over-the-Air (OTA) Updates

A significant advantage of React Native for B2B is the ability to push updates without going through the lengthy App Store/Play Store review process. Services like Expo Application Services (EAS) Update allow you to deploy JavaScript and asset changes instantly. This is invaluable for shipping critical bug fixes or small features to your enterprise clients rapidly.

Comparing TCO: Unified Stack vs. Siloed Stacks

The business case for a unified architecture becomes undeniable when you analyze the Total Cost of Ownership (TCO).

Metric	Siloed Stacks (Separate Web & Mobile Teams)	Unified Stack (Next.js + React Native)
Development Velocity	Slow. Features must be built twice.	High. Shared logic accelerates feature parity.
Team Size	Larger. Requires specialized frontend and mobile devs.	Smaller. A single team of React/TS developers can build both.
Code Duplication	High. Business logic, validation, API calls are duplicated.	Minimal. ~70% of code can be shared.
Maintenance Overhead	High. A single bug may require two separate fixes, PRs, and deployments.	Low. Fix a bug in the shared package; it's fixed everywhere.
Onboarding Time	High. New developers need to learn two distinct codebases.	Low. One architecture, one set of patterns.
Total Cost of Ownership	High	Significantly Lower

DPDP Act Compliance in a Unified Architecture

For businesses operating in India, compliance with the Digital Personal Data Protection (DPDP) Act, 2023, is mandatory. A unified architecture simplifies this challenge.

Centralized Consent Management

Instead of managing consent flags in two different codebases, you can implement a centralized consent module within /packages/shared-logic.

• Shared Consent State: A Zustand store can manage the user's consent status ({ 'marketing_emails': true, 'location_tracking': false }).
• Enforcement at the Edge: This shared state can be used in the api-client package to conditionally attach data to API requests or in the ui package to conditionally render tracking scripts or location permission prompts.

Data Fiduciary Responsibilities

The DPDP Act places significant responsibility on Data Fiduciaries. By defining your API layer with tRPC and Zod in the Next.js backend, you enforce data minimization and purpose limitation at the single source of truth—the API. Any attempt by a client (web or mobile) to send extraneous data will be automatically stripped out or rejected by your Zod validators.

---

Frequently Asked Questions (FAQ)

Q1: Is this architecture overkill for a small team or a single developer? No, it's actually ideal. The primary benefit is efficiency. For a small team, a unified stack allows you to deliver both a web and mobile product without doubling your workforce or context-switching between different languages and frameworks. The initial setup of the monorepo pays dividends almost immediately.

Q2: How do you handle navigation, which is fundamentally different between the web (Next.js App Router) and mobile (React Navigation)? Navigation is one of the few areas that must remain platform-specific. You cannot share navigation logic. However, you can create a shared routes.ts file in shared-logic that defines the available routes and their parameters as typed constants. Both next/link on the web and useNavigation in React Native can then use these typed constants, preventing typos and ensuring route consistency.

Q3: What are the biggest challenges with this approach? The two main challenges are:

1. Initial Setup Complexity: Correctly configuring TypeScript paths, build tools, and dependencies within a Turborepo monorepo requires careful planning.
2. UI Divergence: While you can share logic, you will inevitably have to write platform-specific UI code. The key is to structure your /packages/ui directory to make this as clean as possible, using techniques like platform-specific file extensions (.web.tsx, .native.tsx).

Q4: Can I use Expo with this architecture? Absolutely. We highly recommend it. Expo simplifies the React Native side immensely by managing native build configurations, providing a rich library of universal modules, and offering services like EAS Build and EAS Update, which are critical for a professional B2B application workflow. Your apps/mobile directory would be an Expo project.

Conclusion: Build Once, Deploy Everywhere

The unified stack architecture with Next.js 15 and React Native is not just a technical novelty; it is a strategic business decision. It enables organizations to build sophisticated, cross-platform B2B SaaS products with greater speed, higher quality, and a significantly lower Total Cost of Ownership. By centralizing business logic, standardizing on a single language, and leveraging the best of both the web and native ecosystems, you can create a robust, scalable, and future-proof foundation for your application.

---

Ready to architect your next-generation B2B platform?

The complexities of setting up a unified, performance-optimized, and compliant architecture require deep expertise. The engineers at Induji Technologies specialize in building scalable solutions using Next.js, React Native, and advanced cloud infrastructure.

Contact us today for a free consultation and quote. Let's build the future of your business, together.