This template demonstrates how to split a single Next.js application by path into multiple applications.
An official Vercel example demonstrating production-ready multi-zone microfrontend architecture
This comprehensive example showcases how to build and deploy a multi-zone microfrontend application using Vercel Microfrontends with Next.js App Router. Learn how to architect independent, deployable frontend applications that work together seamlessly while maintaining team autonomy and deployment independence.
Demo URL: https://vercel-microfrontends-multi-zones.vercel.app/
Deploy each microfrontend independently to experience the full power of distributed development:
Application | Description | Deploy |
---|---|---|
Marketing | Main application handling homepage, pricing, and marketing content | |
Documentation | Dedicated docs microfrontend handling all /docs routes |
This example demonstrates real-world microfrontend patterns and best practices:
Microfrontends extend the microservices concept to frontend development, allowing you to:
This example implements a multi-zone architecture where:
Marketing Application (apps/marketing/
)
Documentation Application (apps/docs/
)
/docs
routesShared Packages (packages/
)
Ensure you have the following installed:
Clone the repository:
git clone https://github.com/vercel-labs/microfrontends-nextjs-app-multi-zone.gitcd microfrontends-nextjs-app-multi-zone
Install dependencies:
pnpm install
Start the development environment:
pnpm dev
This command starts both applications simultaneously:
microfrontends-nextjs-app-multi-zone/├── apps/│ ├── marketing/ # Main application (shell)│ │ ├── app/ # Next.js App Router pages│ │ ├── components/ # UI components│ │ ├── lib/ # Utilities and helpers│ │ ├── microfrontends.json # Routing configuration│ │ └── next.config.ts # Next.js configuration with MFE setup│ ││ └── docs/ # Documentation microfrontend│ ├── app/ # Documentation pages│ ├── components/ # Doc-specific components│ ├── lib/ # Documentation utilities│ └── next.config.ts # Standalone Next.js configuration│├── packages/│ ├── eslint-config-custom/ # Shared linting configuration│ └── ts-config/ # Shared TypeScript configuration│├── package.json # Root package.json with workspaces├── pnpm-workspace.yaml # PNPM workspace configuration└── turbo.json # Turborepo build pipeline
microfrontends.json
This file defines how microfrontends are discovered and routed:
next.config.ts
Each application has its own Next.js configuration enhanced with:
withMicrofrontends()
: Enables microfrontend capabilitieswithVercelToolbar()
: Adds development debugging toolsThe magic happens through the @vercel/microfrontends
package:
The marketing application (shell) reads the microfrontends.json
configuration to understand which routes should be handled by which microfrontend.
When a user navigates to /docs
, Vercel Microfrontends:
All routing between microfrontends is handled dynamically by Vercel Microfrontends, allowing for a smooth user experience without page reloads.
During development, both applications run simultaneously, and the routing happens transparently, providing a seamless development experience.
In production, each microfrontend is deployed independently to Vercel, and the routing configuration ensures requests are directed to the correct deployment.
Learn more in the routing documentation.
You can develop microfrontends in isolation using the microfrontends local development proxy:
# Work on the marketing application onlycd apps/marketingpnpm dev# Work on the documentation application onlycd apps/docspnpm dev
# Build all applicationspnpm build# Run linting across all appspnpm lint# Type check all applicationspnpm typecheck# Run all quality checkspnpm checks
apps/
directorymicrofrontends.json
to include routing rulesLearn more in the Managing Microfrontends documentation.
Each microfrontend can be deployed independently, enabling:
Each application includes optimized Vercel configuration:
Development builds include the Vercel Toolbar for enhanced debugging:
Built-in integration with:
Port conflicts during development:
# Kill processes using the required portsnpx kill-port 3000 3001pnpm dev
Routing not working in development:
microfrontends.json
configurationBuild failures:
pnpm typecheck
to identify TypeScript issuesBoth applications use withMicrofrontends
to enable cross-zone routing:
// apps/marketing/next.config.ts & apps/docs/next.config.tsimport { withMicrofrontends } from '@vercel/microfrontends/next/config';import { withVercelToolbar } from '@vercel/toolbar/plugins/next';export default withVercelToolbar()(withMicrofrontends(nextConfig, { debug: true }),);
The marketing app defines how to route to the docs microfrontend:
// apps/marketing/microfrontends.json{"applications": {"microfrontends-nextjs-app-multi-zone-marketing": {"development": {"local": 3000,"fallback": "microfrontends-nextjs-app-multi-zone-marketing.vercel.app",},},"microfrontends-nextjs-app-multi-zone-docs": {"development": { "local": 3001 },"routing": [{ "group": "docs", "paths": ["/docs", "/docs/:path*"] }],},},}
The @vercel/microfrontends
package can be used to prefetch and prerender links to other microfrontends.
First, embed the PrefetchCrossZoneLinksProvider
element in the root layout.tsx
of your application.
Then, use the enhanced Link
component for seamless optimized navigation between zones:
// In marketing app - navigating to docsimport { Link } from '@vercel/microfrontends/next/client';<Link href="/docs">View Documentation</Link><Link href="/docs/getting-started">Getting Started Guide</Link>
This setup enables the marketing app to seamlessly route /docs
requests to the documentation microfrontend while maintaining a unified user experience.
Learn more in the Optimizing Hard Navigations documentation.
This template demonstrates how to split a single Next.js application by path into multiple applications.
An official Vercel example demonstrating production-ready multi-zone microfrontend architecture
This comprehensive example showcases how to build and deploy a multi-zone microfrontend application using Vercel Microfrontends with Next.js App Router. Learn how to architect independent, deployable frontend applications that work together seamlessly while maintaining team autonomy and deployment independence.
Demo URL: https://vercel-microfrontends-multi-zones.vercel.app/
Deploy each microfrontend independently to experience the full power of distributed development:
Application | Description | Deploy |
---|---|---|
Marketing | Main application handling homepage, pricing, and marketing content | |
Documentation | Dedicated docs microfrontend handling all /docs routes |
This example demonstrates real-world microfrontend patterns and best practices:
Microfrontends extend the microservices concept to frontend development, allowing you to:
This example implements a multi-zone architecture where:
Marketing Application (apps/marketing/
)
Documentation Application (apps/docs/
)
/docs
routesShared Packages (packages/
)
Ensure you have the following installed:
Clone the repository:
git clone https://github.com/vercel-labs/microfrontends-nextjs-app-multi-zone.gitcd microfrontends-nextjs-app-multi-zone
Install dependencies:
pnpm install
Start the development environment:
pnpm dev
This command starts both applications simultaneously:
microfrontends-nextjs-app-multi-zone/├── apps/│ ├── marketing/ # Main application (shell)│ │ ├── app/ # Next.js App Router pages│ │ ├── components/ # UI components│ │ ├── lib/ # Utilities and helpers│ │ ├── microfrontends.json # Routing configuration│ │ └── next.config.ts # Next.js configuration with MFE setup│ ││ └── docs/ # Documentation microfrontend│ ├── app/ # Documentation pages│ ├── components/ # Doc-specific components│ ├── lib/ # Documentation utilities│ └── next.config.ts # Standalone Next.js configuration│├── packages/│ ├── eslint-config-custom/ # Shared linting configuration│ └── ts-config/ # Shared TypeScript configuration│├── package.json # Root package.json with workspaces├── pnpm-workspace.yaml # PNPM workspace configuration└── turbo.json # Turborepo build pipeline
microfrontends.json
This file defines how microfrontends are discovered and routed:
next.config.ts
Each application has its own Next.js configuration enhanced with:
withMicrofrontends()
: Enables microfrontend capabilitieswithVercelToolbar()
: Adds development debugging toolsThe magic happens through the @vercel/microfrontends
package:
The marketing application (shell) reads the microfrontends.json
configuration to understand which routes should be handled by which microfrontend.
When a user navigates to /docs
, Vercel Microfrontends:
All routing between microfrontends is handled dynamically by Vercel Microfrontends, allowing for a smooth user experience without page reloads.
During development, both applications run simultaneously, and the routing happens transparently, providing a seamless development experience.
In production, each microfrontend is deployed independently to Vercel, and the routing configuration ensures requests are directed to the correct deployment.
Learn more in the routing documentation.
You can develop microfrontends in isolation using the microfrontends local development proxy:
# Work on the marketing application onlycd apps/marketingpnpm dev# Work on the documentation application onlycd apps/docspnpm dev
# Build all applicationspnpm build# Run linting across all appspnpm lint# Type check all applicationspnpm typecheck# Run all quality checkspnpm checks
apps/
directorymicrofrontends.json
to include routing rulesLearn more in the Managing Microfrontends documentation.
Each microfrontend can be deployed independently, enabling:
Each application includes optimized Vercel configuration:
Development builds include the Vercel Toolbar for enhanced debugging:
Built-in integration with:
Port conflicts during development:
# Kill processes using the required portsnpx kill-port 3000 3001pnpm dev
Routing not working in development:
microfrontends.json
configurationBuild failures:
pnpm typecheck
to identify TypeScript issuesBoth applications use withMicrofrontends
to enable cross-zone routing:
// apps/marketing/next.config.ts & apps/docs/next.config.tsimport { withMicrofrontends } from '@vercel/microfrontends/next/config';import { withVercelToolbar } from '@vercel/toolbar/plugins/next';export default withVercelToolbar()(withMicrofrontends(nextConfig, { debug: true }),);
The marketing app defines how to route to the docs microfrontend:
// apps/marketing/microfrontends.json{"applications": {"microfrontends-nextjs-app-multi-zone-marketing": {"development": {"local": 3000,"fallback": "microfrontends-nextjs-app-multi-zone-marketing.vercel.app",},},"microfrontends-nextjs-app-multi-zone-docs": {"development": { "local": 3001 },"routing": [{ "group": "docs", "paths": ["/docs", "/docs/:path*"] }],},},}
The @vercel/microfrontends
package can be used to prefetch and prerender links to other microfrontends.
First, embed the PrefetchCrossZoneLinksProvider
element in the root layout.tsx
of your application.
Then, use the enhanced Link
component for seamless optimized navigation between zones:
// In marketing app - navigating to docsimport { Link } from '@vercel/microfrontends/next/client';<Link href="/docs">View Documentation</Link><Link href="/docs/getting-started">Getting Started Guide</Link>
This setup enables the marketing app to seamlessly route /docs
requests to the documentation microfrontend while maintaining a unified user experience.
Learn more in the Optimizing Hard Navigations documentation.