Micro Frontends

Definition

An architectural style where a single large web application is built by combining several smaller, independently developed and deployed frontend applications.

Explain Like I'm New

A massive e-commerce site. Team A builds the 'Search Bar' using React. Team B builds the 'Shopping Cart' using Vue.js. Team C builds the 'Product Page' using Next.js. The user sees one seamless website, but under the hood, it is three separate apps stitched together.

Real World Example

Using Next.js Multi-Zones or Webpack Module Federation to allow different engineering teams to deploy their specific part of a massive website without needing to coordinate with the other teams.

Common Use Cases

•Massive enterprise teams
•Legacy code migration
•Independent deployments

Interactive Example

Console output will appear here...

Interview Questions

basic

What is the primary organizational benefit of Micro Frontends for a company with 500 developers?

intermediate

How does Next.js handle Micro Frontends natively?

Flash Cards

Question

Benefit for 500 devs?

Click to reveal answer

Answer

Independent deployments. Team A can deploy a bug fix to the Search Bar on a Friday afternoon without risking taking down the Shopping Cart or the entire website.

Question

Next.js native solution?

Click to reveal answer

Answer

Next.js 'Multi-Zones'. You can configure an main Next.js app to automatically proxy specific URLs (like `/blog`) to an entirely different Next.js application hosted on a different server.