Micro-frontends bring microservice thinking to the browser. Instead of one big React app, you split your frontend into smaller apps owned by independent teams.
Approaches
1. Build-time Integration Each micro-frontend is published as an npm package. The shell app installs and renders them. Simple, but teams are coupled at build time.
2. Run-time Integration (Module Federation) Webpack Module Federation lets apps share modules at runtime. Each micro-frontend exposes components and the shell loads them dynamically.
3. iframes Oldest and most isolated approach. Great for security sandboxing but terrible for UX and performance.
4. Next.js Multi-Zones (Recommended for Next.js apps) Use Next.js rewrites to stitch zones together at the HTTP level. Each zone is a full Next.js app with independent deploys.
Trade-offs
| Approach | Isolation | DX | Performance |
| npm packages | Low | High | High |
| Module Federation | Medium | Medium | Medium |
| iframes | High | Low | Low |
| Multi-Zones | High | High | High |
Recommendations
For new greenfield projects using Next.js, Multi-Zones is the recommended approach. It gives you true independence without the complexity of Module Federation.
For mixed-framework environments, consider a custom micro-frontend orchestrator or a platform like single-spa.