--- title: "Microfrontends on Vercel" description: "Build scalable, independent frontend applications with Vercel's microfrontends platform." canonical_url: "https://vercel.com/academy/microfrontends-on-vercel" md_url: "https://vercel.com/academy/microfrontends-on-vercel.md" docset_id: "vercel-academy" doc_version: "1.0" last_updated: "2026-04-11T04:40:48.305Z" content_type: "course" lessons: 17 estimated_time: lesson_urls: - "https://vercel.com/academy/microfrontends-on-vercel/when-microfrontends.md" - "https://vercel.com/academy/microfrontends-on-vercel/architecture-patterns.md" - "https://vercel.com/academy/microfrontends-on-vercel/monorepo-setup.md" - "https://vercel.com/academy/microfrontends-on-vercel/project-structure.md" - "https://vercel.com/academy/microfrontends-on-vercel/configuration-basics.md" - "https://vercel.com/academy/microfrontends-on-vercel/path-routing.md" - "https://vercel.com/academy/microfrontends-on-vercel/mfe-local-development.md" - "https://vercel.com/academy/microfrontends-on-vercel/shared-packages-introduction.md" - "https://vercel.com/academy/microfrontends-on-vercel/deployment-workflow.md" - "https://vercel.com/academy/microfrontends-on-vercel/navigation-performance.md" - "https://vercel.com/academy/microfrontends-on-vercel/testing-strategies.md" - "https://vercel.com/academy/microfrontends-on-vercel/observability.md" - "https://vercel.com/academy/microfrontends-on-vercel/security-firewall.md" - "https://vercel.com/academy/microfrontends-on-vercel/feature-flag-routing.md" - "https://vercel.com/academy/microfrontends-on-vercel/incremental-migration.md" - "https://vercel.com/academy/microfrontends-on-vercel/remote-components-intro.md" - "https://vercel.com/academy/microfrontends-on-vercel/microfrontends-conclusion.md" --- Vercel Academy — structured learning, not reference docs. Lessons are sequenced. Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume. The lesson shows one path; if the human's project diverges, adapt concepts to their setup. Preserve the learning goal over literal steps. Quizzes are pedagogical — engage, don't spoil. Quiz answers are included for your reference. # Microfrontends on Vercel Picture a food truck lot. You might have a taco truck, a burger truck, a shrimp truck. Each truck is independent and can operate without coordinating with the others. They all exist in the same space though and provide a unified experience to customers. The owner of the lot might build a bar, hire a band, and coordinate a cleaning service, but the trucks can operate independently. This is the microfrontend pattern. Microfrontends let teams work independently on large-scale applications without stepping on each other's toes. When your monolith's build times balloon past 5 minutes and deploys become coordination nightmares, splitting your frontend into independently owned pieces restores sanity. Vercel handles the complexity at the platform layer, composing independent applications into a seamless experience for users. This course teaches you to build, deploy, and operate production microfrontends without the usual infrastructure headaches. ### What you'll build **Complete Multi-Zone Platform:** - **Marketing Site**: Default application that catches unmatched routes - **Documentation App**: Independent docs site served at `/docs/*` - **Dashboard App**: Protected application at `/app/*` and `/settings/*` **Shared Infrastructure:** - **UI Package**: Header, Footer, and design system components shared across all apps - **Utils Package**: Auth helpers, API clients, and shared utilities - **Config Package**: TypeScript, ESLint, and Tailwind configurations **Production Patterns:** - **Local Development Proxy**: Run all apps simultaneously through port 3024 - **Routing Tests**: Validate configurations before deployment - **Debug Observability**: Inspect routing decisions with headers and traces - **Feature Flag Routing**: Route users to different apps based on flags ### How this course teaches This isn't architecture theory. You'll build everything from scratch: - **Start with decisions** - Evaluate whether microfrontends solve your actual problems - **Build incrementally** - Add complexity only when you understand the foundation - **Deploy early** - See routing work in production before adding features - **Debug real issues** - Handle asset conflicts, path isolation, and fallback behavior - **Ship working code** - Every lesson produces deployable, production-ready configuration ## Prerequisites Before diving in, make sure you're familiar with: - Next.js: Comfortable with App Router, routing, and basic configuration - Vercel: Experience deploying applications to Vercel - Monorepos: Basic understanding of workspaces (pnpm, npm, or yarn) - Git: Version control for managing multiple applications - Node.js: [Latest LTS version](https://nodejs.org/en/download) (v20 or later) - pnpm: [Package manager](https://pnpm.io/installation) used throughout the course - Vercel account: [Create one for free](https://vercel.com/signup) **Framework scope:** This course uses Next.js for all examples. The concepts apply to other supported frameworks (SvelteKit, Vite, React Router) but code samples are Next.js specific. ## What you'll build & learn in this course This course is split into four sections: 1. **Foundations**: Evaluate microfrontends and set up your monorepo structure 2. **Vertical Microfrontends**: Configure, develop, and deploy multi-zone applications 3. **Production Patterns**: Performance, testing, observability, and security 4. **Advanced Patterns**: Feature flags, incremental migration, and remote components Each section builds on the previous one. Follow the order for best results. ### Section 1: Foundations Evaluate whether microfrontends solve your specific scaling challenges: - **Decision Framework**: Understand the two primary use cases: scaling DX and incremental migration - **Architecture Patterns**: Learn vertical (multi-zone) vs horizontal (remote components) approaches - **Monorepo Setup**: Configure Turborepo with apps and shared packages - **Project Structure**: Create the directory layout for a production multi-zone application You'll gain clarity on when microfrontends make sense and set up the foundation for building them. ### Section 2: Vertical Microfrontends Build and deploy your first multi-zone application on Vercel: - **Configuration Basics**: Write `microfrontends.json` and wrap Next.js configs with `withMicrofrontends` - **Path Routing**: Configure routing patterns and understand the execution order (Firewall → Microfrontends → Headers → Redirects → Middleware → Rewrites) - **The Middleware Shift**: Understand why central middleware breaks with microfrontends - requests route directly to child apps, skipping your default app's middleware entirely - **Local Development**: Run multiple apps through the microfrontends proxy at localhost:3024 - **Shared Packages**: Build reusable UI components and utilities across applications - **Deployment Workflow**: Deploy to Vercel with proper group configuration and fallback behavior By the end, you'll have a complete multi-zone application deployed and routing correctly. ### Section 3: Production Patterns Make your microfrontends production-ready: - **Navigation Performance**: Optimize cross-app navigation with Speculation Rules prefetching - **Testing Strategies**: Validate routing configuration with `@vercel/microfrontends/next/testing` - **Observability**: Monitor routing decisions with debug headers and Vercel Observability - **Security and Firewall**: Configure deployment protection and WAF rules across applications Each lesson adds operational capabilities that catch problems before users do. ### Section 4: Advanced Patterns Apply microfrontends to real-world scenarios: - **Feature Flag Routing**: Route requests to different microfrontends based on flags for safe rollouts - **Incremental Migration**: Apply the strangler fig pattern to migrate from legacy applications - **Remote Components**: Understand when horizontal microfrontends (component-level sharing) make sense - **Conclusion**: Decision framework and next steps for choosing the right pattern By the end, you'll have strategies for gradual rollouts, legacy migrations, and architectural decisions. *** By the end of this course, you'll know how to evaluate, build, deploy, and operate production microfrontends on Vercel. Ready to start? Let's begin with understanding when microfrontends actually make sense. --- [Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)