Next.js Multi-Zones Starter

Vercel Microfrontends - Next.js Multi-Zones is a reference implementation from the Vercel examples repository that demonstrates how to split a single domain into two independently deployable Next.js applications using the Vercel Microfrontends routing package. This starter uses the Next.js App Router and runs on Vercel's platform, with a live demo available at https://vercel-microfrontends-multi-zones.vercel.app/.

What is Next.js Multi-Zones Starter?

Next.js Multi-Zones Starter is a monorepo containing two separate microfrontends: a marketing application (serving homepage, pricing, and marketing content) and a documentation application (handling all /docs routes). It takes a microfrontends.json routing configuration and the two app codebases as input, and produces a single cohesive website where requests to /docs are dynamically proxied to a separate deployment. The project is authored by Vercel and is part of the public vercel/examples repository, which has over 5,000 stars on GitHub.

Key Features

• Independent deployments — Each microfrontend has its own one-click Deploy button to Vercel, so marketing and docs can ship on their own schedules.
• Path-based routing — The apps/marketing/microfrontends.json file maps the docs zone to paths like /docs and /docs/:path*, with local ports for development.
• Optimized cross-zone navigation — PrefetchCrossZoneLinksProvider and a special Link component from @vercel/microfrontends/next/client prefetch and prerender links to other zones.
• Local development proxy — pnpm dev launches the marketing app on port 3000 and the docs app on port 3001, then proxies the docs app through the marketing app on port 3024.
• Turborepo build pipeline — The root turbo.json orchestrates build, lint, typecheck, and checks across all workspace packages.
• Shared configuration packages — packages/ includes eslint-config-custom and ts-config to keep code style and TypeScript settings consistent between apps.
• Next.js App Router + Tailwind CSS — Both apps use the app/ directory structure with Tailwind CSS for styling, and each has its own next.config.ts enhanced by withMicrofrontends() and withVercelToolbar().

Who is it for?

• Frontend platform teams — looking to split a monolithic Next.js application into smaller deployable units to reduce build times and decouple releases.
• Engineering leads — evaluating microfrontend architecture; this starter provides a working reference with routing and deployment flow fully documented.
• Next.js developers — who want to learn Multi-Zones with the App Router, using the provided configuration files and folder structure as a guide.

What can you do with this template?

• Modularize an existing website: Split a marketing site and a documentation site into separate applications that still share one domain and URL structure.
• Add a new microfrontend: Follow the documented four-step process — create an app in apps/, update microfrontends.json, add it to the workspace, and configure deployment.
• Run a microfrontend in isolation: Use cd apps/marketing && pnpm dev to work on just one app during development, or run both together with the transparent proxy.

How does it work?

The marketing app acts as the shell and reads microfrontends.json to learn which routes belong to which zone. When a visitor navigates to /docs, Vercel Microfrontends recognizes the route, proxies the request to the documentation app's deployment (or local dev server), and returns the response to the browser. The custom Link component prefetches the target zone to make the transition feel immediate.

FAQ

What are the prerequisites for this template?

Node.js 20.x or later, pnpm 9.4.0 (the recommended package manager), and Git are required. The setup commands are git clone, pnpm install, and pnpm dev.

Do the marketing and docs apps need separate Vercel deployments?

Yes. The example provides two separate Deploy buttons, and the whole point of the multi-zone architecture is that each microfrontend is deployed independently to Vercel while sharing the same domain through routing.

Where is the routing configuration defined?

Routing lives in apps/marketing/microfrontends.json. It declares the applications, their local development ports, fallback URLs, and which path groups (like docs) map to which microfrontend.

Can I add a third microfrontend?

Yes. The repository explains a four-step addition workflow: create the new application under apps/, add routing rules to microfrontends.json, include it in the pnpm workspace, and set up its Vercel deployment.