Microfrontends

Microfrontends allow you to split a single application into smaller, independently deployable units that render as one cohesive application for users. Different teams using different technologies can develop, test, and deploy each microfrontend while Vercel handles connecting the microfrontends and routing requests at the edge.

They are valuable for:

• Improved developer velocity: You can split large applications into smaller units, improving development and build times.
• Independent teams: Large organizations can split features across different teams, with each team owning their technology stack and development lifecycle.
• Incremental migration: You can gradually migrate from legacy systems to modern frameworks without rewriting everything at once.

Microfrontends may add additional complexity to your development process. To improve developer velocity, consider alternatives like:

• Monorepos with Turborepo
• Feature flags
• Faster compilation with Turbopack

• Learn how to set up and configure microfrontends using our Quickstart guide
• Test your microfrontends locally before merging the code to preview and production

To make the most of your microfrontend experience, install the Vercel Toolbar.

Once you have configured the basic structure of your microfrontends,

• Learn the different ways in which you can route paths to different microfrontends as well as available options
• Learn how to manage your microfrontends to add and remove microfrontends, share settings, route observability and manage the security of each microfrontend.
• Learn how to optimize navigations between different microfrontends
• Use the Vercel Toolbar to manage different aspects of microfrontends such as overriding microfrontend routing.
• Learn how to troubleshoot your microfrontends setup or add unit tests to ensure everything works.

• 1 microfrontends group is allowed per team.
• Up to 3 microfrontends are allowed per group.

Contact Sales to learn more about increasing these limits.

• Split an application by path with Next.js
• Build remote components in Vite + React with Single SPA + Module Federation
• Next.js Pages Router with Module Federation
• Incremental migrations with microfrontends