SaaS Microservices

SaaS Microservices is a Vercel example project that runs a Next.js dashboard and an Express.js API backend as two separate applications served under a single domain through Vercel's microfrontends routing.

What is SaaS Microservices?

SaaS Microservices is a working SaaS example made of two independent applications: a dashboard built with Next.js that renders the user interface, and an api built with Express.js that serves the data shown in that dashboard. A request enters through Vercel, which routes /api/* paths to the API service and everything else to the dashboard application. The project is part of Vercel's curated examples collection (topics: examples, nextjs, vercel) and is installed and started with pnpm, with the dashboard available at localhost port 3024 during development.

What makes SaaS Microservices stand out?

• Two separately deployable services — the dashboard (Next.js) and api (Express.js) live in the same repository as distinct applications rather than one monolith.
• Microfrontends path routing — the dashboard application owns the microfrontends.json configuration file that maps API paths to the other microservice.
• Single shared domain — because both apps run under one domain, the browser reaches the API through relative /api/* paths instead of cross-origin requests.
• pnpm workspace scripts — pnpm dev boots every application, while pnpm dev:dashboard and pnpm dev:api start a single service.
• Turborepo task filtering — pnpm turbo run dev -F api -F dashboard runs a chosen subset of applications from one command.
• Automatic local development proxy — running pnpm dev starts a proxy that stitches requests destined for each service to the matching local instance.
• Documented request flow — the README includes a Mermaid diagram showing requests splitting at Vercel between /api/* and all other traffic.

Who should use SaaS Microservices?

• Developers evaluating microfrontends: see a minimal, runnable two-service setup and read the microfrontends.json routing rules before adopting the pattern.
• Teams splitting a monolith frontend: use the dashboard plus API split as a reference for separating UI and backend deployments while keeping one public domain.
• Next.js developers who need an Express backend: start from a working dashboard that already calls an Express.js service and returns its data into the UI.
• Anyone learning Vercel multi-app projects: copy the pnpm and Turborepo scripts to run and filter services locally.

What can you do with SaaS Microservices?

• Prototype a split SaaS architecture: clone the example, keep the Next.js dashboard for UI work, and extend the Express.js service with your own endpoints under /api/*.
• Test microfrontends routing locally: run pnpm dev to exercise the local development proxy that forwards each path to the correct local service.
• Work on one service in isolation: use pnpm dev:dashboard or pnpm dev:api when you only need to change the UI or the backend.
• Reuse the dashboard shell: replace the API responses with your own data source and keep the existing routing configuration intact.

How does it work?

1. Run pnpm install to install dependencies for both applications.
2. Run pnpm dev to start the dashboard, the API service, and the local development proxy together.
3. Open localhost port 3024 to view the dashboard, which calls the API service for the data it displays. In deployment, Vercel applies the same split: /api/* to the API app, everything else to the dashboard.

FAQ

What is included in the SaaS Microservices example?

Two applications: a Next.js dashboard that renders the UI and owns the microfrontends configuration, and an Express.js API that serves the data shown in the dashboard. Both ship in one repository managed with pnpm scripts, plus a Mermaid diagram in the README documenting the request flow.

How do the two services share one domain?

Vercel's microfrontends support routes requests by path. Traffic matching /api/* is sent to the Express.js API application, while every other request goes to the Next.js dashboard, so browsers only ever talk to one origin.

Can I run just one of the applications locally?

Yes. pnpm dev:dashboard starts only the Next.js dashboard and pnpm dev:api starts only the Express.js API. You can also run a chosen subset with pnpm turbo run dev -F api -F dashboard.

What is the local development proxy for?

When you run pnpm dev, a local development proxy starts automatically and stitches requests from each application to the local instance of the matching service, mimicking the path-based routing that Vercel performs in production.