Build Micro frontends in NextJS and ReactJS with Webpack 5 Module Federation

Introduction

Micro Frontends

Consider an application that is a composition of features, developers usually have to be familiar with different features.

The idea of Micro Frontends is to break down the monolithic application into pieces so that features or pages could be developed and deployed independently by specific teams. This idea provides the following advantages.

1. For engineering, the critical bug on micro frontends won’t break the application entirely. It may relieve the pain to users.
2. For the management, we could have a few independent roadmaps that won’t affect each other. Each feature will have its release date and build version.

Source: https://micro-frontends.org/

Solutions for Micro Frontends

• Basic implementation: Web components with a server-side include
• Server-side rendering: Holocron, Podium, and Ara Framework
• Client-side composition: Webpack 5 module federation and single-spa