This is Part of my weekend webinar and in this video, i am covering Microfrontends: Microservices for the Frontend using Next JS (webpack 5 module federation)

Github
https://github.com/tkssharma/nextjs-micro-frontends

00:00 what are micro-frontends
00:56 journey from monolith to micro frontends
03:19 core ideas of micro frontends
06:18 demo example of micro frontends
10:15 webpack 5 module federation
11:53 demo application setup
12:33 next config with webpack module federation
14:30 exposing components from the host application
16:40 consuming components in the container application
17:58 loading components at runtime
19:09 let's run the demo and see the magic

In short, micro frontends are all about slicing up big and scary things into smaller, more manageable pieces, and then being explicit about the dependencies between them. Our technology choices, our codebases, our teams, and our release processes should all be able to operate and evolve independently of each other, without excessive coordination. https://martinfowler.com/articles/micro-frontends.html

Webpack 5 Module federation made this possible to share components at runtime

Module Federation is one of the most exciting features in Webpack 5 and is considered a game-changer in JavaScript architecture. It supports more independent and straightforward code sharing at runtime among JavaScript applications, making the applications more adaptive and dynamic.
Webpack Module Federation makes sharing code and dependencies between different code bases easier. This architecture loads the code dynamically at runtime to reduce the frequency of code duplication, and the host application only downloads the missing dependencies, if any.

We will be covering Microfrontends using Next.js and Module Federation with demo example

🐦 Twitter: https://twitter.com/tkssharma
🐦 Github: https://github.com/tkssharma
🐦 Website: https://tkssharma.com
🐦 Blogs: https://blog.tkssharma.com

I’m Tarun, I am Publisher, Trainer Developer, working on Enterprise and open source Technologies JavaScript frameworks (React Angular, sveltekit, nextjs), I work with client-side and server-side javascript programming which includes node js or any other frameworks Currently working with JavaScript framework React & Node js 🚀 with Graphql 🎉 developer publications.

I am a passionate Javascript developer writing end-to-end applications using javascript using React, Angular 🅰️, and Vue JS with Node JS, I publish video tutorials and write about everything I know. I aim to create a beautiful corner of the web free of ads, sponsored posts,