--- title: "Conclusion" description: "Review key learnings, decision frameworks, and resources for continuing your microfrontends journey." canonical_url: "https://vercel.com/academy/microfrontends-on-vercel/microfrontends-conclusion" md_url: "https://vercel.com/academy/microfrontends-on-vercel/microfrontends-conclusion.md" docset_id: "vercel-academy" doc_version: "1.0" last_updated: "2026-04-11T19:41:54.160Z" content_type: "lesson" course: "microfrontends-on-vercel" course_title: "Microfrontends on Vercel" prerequisites: [] --- 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. # Conclusion # Conclusion You've built a production microfrontends application from scratch. Let's review what you've learned and where to go next. ## What You Built The Acme Platform: a complete multi-zone application with: ``` acme-platform/ ├── apps/ │ ├── marketing/ # Default app (/, /pricing, /about) │ ├── docs/ # Child app (/docs/*) │ ├── dashboard/ # Child app (/app/*, /settings/*) │ └── legacy-proxy/ # Proxy for incremental migration ├── packages/ │ ├── ui/ # Header, Footer, SpeculationRules │ └── utils/ # Auth helpers ├── microfrontends.json # Routing configuration └── turbo.json # Task orchestration ``` This mirrors how Vercel structures vercel.com with 12 microfrontend projects. ## Key Concepts Mastered ### Section 1: Foundations - **When to use microfrontends** - DX scaling and incremental migration - **Vertical vs horizontal** - Split by route vs split by component - **Monorepo benefits** - Shared packages, atomic commits, coordinated builds ### Section 2: Vertical Microfrontends - **Configuration** - `microfrontends.json` and `withMicroFrontends` wrapper - **Routing order** - Firewall → Microfrontends → Headers → Redirects → Middleware → Rewrites - **Path isolation** - Each app only sees its own routes - **Local development** - Proxy at localhost:3024 - **Deployment** - Fallback behavior (commit → branch → production) ### Section 3: Production Patterns - **Performance** - Speculation Rules for prefetching/prerendering - **Testing** - Routing validation with `validateRouting` - **Observability** - Debug headers and traces - **Security** - Firewall rules cascade from default app ### Section 4: Advanced Patterns - **Feature flags** - Route users to different apps based on flags - **Migration** - Strangler fig pattern for incremental adoption - **Remote components** - When horizontal microfrontends make sense ## Decision Framework When evaluating microfrontends for a project: ``` ┌─────────────────────────────────────────────────────────┐ │ Should you use microfrontends? │ ├─────────────────────────────────────────────────────────┤ │ │ │ Build times >5 min? ───Yes───► Consider MFE │ │ │ │ │ No │ │ │ │ │ Multiple teams blocked ───Yes───► Consider MFE │ │ on each other? │ │ │ │ │ No │ │ │ │ │ Migrating from legacy? ───Yes───► Consider MFE │ │ │ │ │ No │ │ │ │ │ ► Try Turbopack first, stay monolithic │ │ │ └─────────────────────────────────────────────────────────┘ ``` ### Quick Reference | Scenario | Recommendation | | --------------------------------------------- | --------------------------------- | | Build times >5 min, multiple teams | Vertical microfrontends | | Migrating from legacy stack | Microfrontends with feature flags | | Single team, builds under 3 min | Stick with monolith + Turbopack | | Same component across many sites | Consider horizontal (when stable) | | Tightly coupled UX, frequent cross-navigation | Probably not microfrontends | ## Common Pitfalls to Avoid | Pitfall | Prevention | | ------------------------------ | ------------------------------------------------------- | | Central middleware assumptions | Remember: each app's middleware is isolated | | Asset collisions | Always use `withMicroFrontends` wrapper | | Redirect confusion | Redirects only run in the app that receives the request | | Over-engineering | Start simple, add complexity when needed | | Premature adoption | Microfrontends have overhead. Earn that cost. | ## Your Next Steps 1. **Clone a template** - Start with a working example 2. **Audit your application** - Identify natural boundaries 3. **Start small** - Extract one section before going all-in 4. **Deploy to preview** - Test routing before production 5. **Monitor and iterate** - Use observability to catch issues ## Course Complete You now have the knowledge to: - Evaluate whether microfrontends solve your problems - Build and deploy vertical microfrontends on Vercel - Optimize performance with Speculation Rules - Test and debug routing configurations - Implement gradual rollouts with feature flags - Plan migrations from legacy applications Thank you for taking this course. Now go build something great. *** ## Resources ### Official Documentation - [Vercel Microfrontends Docs](https://vercel.com/docs/microfrontends) - [Turborepo Microfrontends Guide](https://turborepo.com/docs/guides/microfrontends) - [Next.js Multi-Zones](https://nextjs.org/docs/app/guides/multi-zones) ### Code - [GitHub: vercel/microfrontends](https://github.com/vercel/microfrontends) - [NPM: @vercel/microfrontends](https://www.npmjs.com/package/@vercel/microfrontends) ### Further Reading - [How Vercel Adopted Microfrontends](https://vercel.com/blog/how-vercel-adopted-microfrontends) - [Incremental Migrations Guide](https://vercel.com/guides/incremental-migrations-with-microfrontends) --- [Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)