The Unified Codebase Architecture: Next.js, Expo & ERPNext for Enterprise Apps in 2026

Key Takeaways

• The Problem with Silos: Maintaining separate codebases for web (e.g., React) and mobile (e.g., Swift/Kotlin or React Native) is inefficient, costly, and leads to inconsistent user experiences and duplicated business logic.
• The Unified Solution: A monorepo architecture using Turborepo allows you to share UI components, business logic, type definitions, and API clients between a Next.js web application and an Expo (React Native) mobile application.
• Core Technology Stack: The optimal stack for this architecture in 2026 includes Next.js 15 for its advanced server-side rendering, Expo for its robust cross-platform mobile development ecosystem, and a headless ERPNext instance for a single source of truth via its REST API.
• The "Glue" Technologies: Libraries like Tamagui (for universal UI components) and Solito (for universal navigation) are critical for bridging the gap between the web and native environments, enabling true "write once, run anywhere" capabilities.
• Business Impact: This architecture dramatically reduces development time, lowers total cost of ownership (TCO), ensures brand and UX consistency, and improves developer experience, ultimately accelerating your time-to-market for new features.

Why the Siloed Approach to Web and Mobile Fails in 2026

For years, the standard enterprise playbook for digital products has been clear but fractured: build a web application with one team and a mobile application with another. A React team builds the customer portal, while a separate Swift/Kotlin or React Native team builds the iOS and Android apps. While this approach gets the job done, it's a relic of a bygone era, fraught with inefficiencies that are becoming untenable in the fast-paced market of 2026.

The core issues with this siloed model are:

1. Duplicated Engineering Effort: Business logic for user authentication, data validation, pricing calculations, and API interactions is written, tested, and maintained twice (or more). A bug in the web app's validation logic likely exists in the mobile app, requiring coordinated fixes across disparate teams and codebases.
2. Inconsistent User Experience: Despite meticulous design systems, subtle differences in component implementation, animations, and interaction logic inevitably creep in. This "UI/UX drift" erodes brand consistency and confuses users who switch between platforms.
3. Increased TCO (Total Cost of Ownership): You're paying for redundant development, QA, and project management. The overhead of managing two separate roadmaps, deployment pipelines, and dependency sets balloons your operational costs.
4. Slower Time-to-Market: Launching a new feature requires a cross-team, multi-codebase effort. The coordination and duplicated work create a significant drag on your ability to innovate and respond to market demands.

The market now demands a more elegant, efficient, and scalable solution. Enter the Unified Codebase Architecture—a paradigm shift that leverages a modern monorepo strategy to build both web and mobile applications from a single, shared foundation.

The Core Components of the Unified Architecture

This architecture isn't about finding a single framework that magically works everywhere. It's about strategically combining the best-in-class tools for web, mobile, and backend, and using a monorepo to create a symbiotic relationship between them.

Next.js 15 for the Enterprise Web Portal

Next.js has solidified its position as the de facto standard for serious, performance-critical web applications. For an enterprise portal, its benefits are non-negotiable:

• React Server Components (RSCs): The ability to render components on the server, with zero client-side JavaScript by default, is a game-changer for performance. This is perfect for data-heavy dashboards and SEO-critical public pages.
• Server Actions: Natively integrated server-side mutations simplify form handling and data updates, reducing boilerplate and improving security by keeping sensitive logic out of the client.
• Advanced Caching & Revalidation: Granular control over data caching (per-fetch, per-segment) allows for building applications that are both highly dynamic and incredibly fast.
• World-Class SEO: As a server-first framework, Next.js provides the robust foundation needed to excel in technical SEO, a critical requirement for any public-facing enterprise platform.

Expo for Cross-Platform Mobile Excellence

While React Native provides the core for building native apps with React, Expo is the production-grade ecosystem built around it. For enterprise use, choosing Expo over vanilla React Native is a strategic advantage:

• Simplified Development Experience: Expo manages the complexities of native build tooling, certificates, and provisioning profiles, allowing developers to focus on writing application code.
• Expo Application Services (EAS): A cloud-based build, submission, and update service that streamlines the entire lifecycle of your mobile app, from development to App Store deployment.
• Over-the-Air (OTA) Updates: Push critical bug fixes and minor updates directly to users' devices without going through the lengthy app store review process—a crucial capability for enterprise agility.
• Robust Universal Module Ecosystem: Access to native device APIs like camera, GPS, and file system is handled through a well-maintained and consistent set of libraries.

ERPNext as the Headless Powerhouse

A modern architecture requires a modern backend. A monolithic ERP with a tightly coupled frontend is a bottleneck. By decoupling ERPNext and using it as a "headless" system, it becomes a powerful, API-first source of truth for all your business data.

• Comprehensive REST API: ERPNext provides a well-documented and robust REST API out-of-the-box for all DocTypes (models). This allows any client—web, mobile, or third-party service—to securely create, read, update, and delete data.
• Single Source of Truth: All your customers, orders, inventory, and business logic reside in one place. Both the Next.js web portal and the Expo mobile app consume data from the same source, eliminating data inconsistency.
• Scalability & Customization: Being open-source, ERPNext can be self-hosted and scaled according to your needs. Its powerful customization capabilities allow you to create custom DocTypes and API endpoints tailored to your specific business processes.

The Monorepo Glue: Turborepo

The monorepo is the foundation that makes the unified codebase possible. Tools like Turborepo (from Vercel) provide the high-performance build system needed to manage a complex, multi-package repository without sacrificing speed.

• Code Sharing: The primary benefit. UI components, utility functions, data models, and API clients are defined in packages/ and imported into the apps/web and apps/mobile applications.
• Efficient Builds: Turborepo understands the dependency graph of your project. It caches build outputs and only re-runs tasks for packages that have actually changed, leading to lightning-fast CI/CD pipelines.
• Simplified Dependency Management: Manage versions of key libraries (like React, TypeScript, and your component library) in one place, ensuring consistency across your entire ecosystem.

The Technical Blueprint: Implementing the Monorepo

Let's move from theory to a practical implementation structure. Here's how you architect the monorepo for maximum code sharing and efficiency.

Setting Up Your Turborepo

Your project's root directory will be managed by pnpm (for efficient dependency management) and turborepo. The folder structure looks like this:

/my-enterprise-app
|-- /apps
|   |-- /web         # Next.js 15 application
|   `-- /mobile      # Expo application
|-- /packages
|   |-- /ui          # Shared UI components (Tamagui)
|   |-- /api-client  # Shared ERPNext API client
|   |-- /shared-logic# Shared business logic (e.g., validation)
|   `-- /config      # Shared configs (ESLint, TypeScript)
|-- package.json
|-- pnpm-workspace.yaml
`-- turbo.json

Sharing UI with Tamagui

Tamagui is a key enabler. It's a universal UI kit and style system that compiles your components to highly optimized code for both web (DOM) and native (React Native). You write a component once, and it renders appropriately on every platform.

In your packages/ui/src/Button.tsx:

import { Button as TamaguiButton, styled } from 'tamagui';

// Create a styled button that can be used everywhere
export const StyledButton = styled(TamaguiButton, {
  name: 'StyledButton',
  backgroundColor: '$blue10',
  color: '$gray1',
  fontWeight: '600',
  pressStyle: {
    backgroundColor: '$blue9',
  },
  // Add variants for different sizes
  variants: {
    size: {
      '...size': (val, { tokens }) => ({
        height: val,
        borderRadius: tokens.radius.sm,
        fontSize: val === 40 ? 16 : 14,
      }),
    },
  } as const,
  defaultVariants: {
    size: 40,
  },
});

Now, you can use <StyledButton> in both your Next.js app and your Expo app, and it will render as a div on the web and a View on mobile, with styles applied correctly.

Unifying Navigation with Solito

Routing is historically a major point of divergence between web and mobile. Solito is a library that solves this by creating a lightweight abstraction layer over Next.js Router and Expo Router.

You define your screens and links in a shared package. In packages/ui/src/screens/UserDetailScreen.tsx:

import { Text, View } from 'tamagui';
import { createParam } from 'solito';
import { useLink } from 'solito/link';

const { useParam } = createParam<{ id: string }>();

export function UserDetailScreen() {
  const [id] = useParam('id');
  const homeLink = useLink({ href: '/' });

  return (
    <View f={1} jc="center" ai="center">
      <Text>User ID: {id}</Text>
      <Button {...homeLink}>Go Home</Button>
    </View>
  );
}

This single screen component can now be mapped to a route in both Next.js (/users/[id]) and Expo (/users/:id), and the useLink hook will correctly render an <a> tag on web and handle a navigation press on mobile.

Creating a Shared API Client for ERPNext

To prevent duplicated data-fetching logic, you create a single API client package. This package is responsible for handling authentication (API keys/tokens for ERPNext), making requests, and typing the responses. Using a library like TanStack Query makes this even more powerful.

In packages/api-client/src/index.ts:

import { FrappeApp } from "frappe-js-sdk";
import { QueryClient } from '@tanstack/react-query';

// Initialize the ERPNext connection
const frappe = new FrappeApp("https://your-erpnext-instance.com");
const db = frappe.db();

export const queryClient = new QueryClient();

// Shared function to fetch a sales order
export async function getSalesOrder(orderId: string) {
  return await db.getDoc('Sales Order', orderId);
}

// Hook to be used in components
export function useSalesOrder(orderId: string) {
    return useQuery({
        queryKey: ['salesOrder', orderId],
        queryFn: () => getSalesOrder(orderId),
    });
}

Now, both your web and mobile components can call useSalesOrder('SO-0001') to fetch data, with caching, revalidation, and type safety handled in one central location.

Real-World Use Case: A B2B Order Management Portal

Imagine a system for a large distributor.

• Web App (Next.js): This is the internal portal for account managers. It's a complex dashboard built with Server Components to efficiently fetch and display large tables of customer data, order histories, and sales analytics from ERPNext. Managers can create complex quotes and approve orders.
• Mobile App (Expo): This is for the field sales team. It's a streamlined, offline-first mobile app. Agents can look up customer info, check real-time inventory levels from ERPNext, and quickly place new orders on-site. When they regain connectivity, the app syncs the new orders with the ERPNext backend.

In this scenario, the unified codebase provides immense value:

• The UI components (buttons, input fields, cards) are identical, defined once in @my-app/ui.
• The API client (@my-app/api-client) for fetching inventory and submitting orders is shared.
• The business logic for order validation (e.g., checking credit limits) is written once in @my-app/shared-logic and used by both the complex web form and the simplified mobile form.

The Business Case: Why This Architecture Drives ROI

Adopting this architecture is a strategic technical decision with profound business implications:

• Reduced Total Cost of Ownership: A smaller, more versatile team can manage the entire digital ecosystem. You eliminate redundant work, slashing your development and maintenance budgets.
• Accelerated Time-to-Market: Features are built once and deployed everywhere simultaneously. Your ability to innovate and respond to customer needs increases by an order of magnitude.
• Improved Developer Experience: Engineers love working with modern, efficient tools. A well-architected monorepo with fast builds and a clear structure attracts and retains top talent.
• Future-Proofing Your Stack: This architecture is built on the dominant, forward-looking technologies in the JavaScript ecosystem. It's a foundation that will scale with your business for years to come.

Frequently Asked Questions (FAQ)

Q1: Is this unified codebase approach suitable for a small startup? Absolutely. While it shines at enterprise scale, startups benefit immensely by starting with this architecture. It prevents the accumulation of tech debt, allows a small team to have a huge impact, and establishes best practices from day one, making it easier to scale the team and the product later.

Q2: What are the main challenges with this architecture? The primary challenge is the initial learning curve and setup complexity. Your team needs to be comfortable with the entire stack: Next.js, React Native/Expo, and the monorepo tooling. Onboarding new developers requires a holistic understanding of the full system. Managing dependencies within the monorepo also requires discipline to avoid version conflicts.

Q3: How does this compare to using Flutter or Kotlin Multiplatform (KMP)? This architecture is ideal for teams already invested in or proficient with the React/TypeScript ecosystem. Its key advantage is the near-100% sharing of UI code via tools like Tamagui, which is more difficult with KMP (where UI is typically native). Flutter is a fantastic alternative, but it requires learning a completely different ecosystem (Dart, different state management, etc.). If your team knows React, this unified JS/TS stack offers a more direct path to cross-platform success.

Q4: Can we integrate this architecture with an existing legacy ERP, not just ERPNext? Yes. The core principle is the "headless" ERP. As long as your existing ERP (e.g., SAP, Oracle) can expose a robust, modern REST or GraphQL API, you can build a shared api-client package to interact with it. The challenge often lies in creating that API layer for the legacy system, a project Induji Technologies frequently assists clients with.

---

Ready to Unify Your Development and Outpace the Competition?

The transition to a unified codebase is a powerful strategic move that will define the most successful enterprise applications of 2026. It requires expert architectural planning and a deep understanding of the entire technology stack, from backend ERP integration to frontend performance optimization.

The team at Induji Technologies specializes in architecting and implementing these complex, high-performance systems. We can help you audit your existing infrastructure, design a custom unified codebase strategy, and build the web and mobile applications that will power your business for the next decade.

Request a Consultation with Our Enterprise Architects Today