Module Federation in Next.js depends on @module-federation/nextjs-mf
Note: There seems to be a problem with css-in-js sharing between federated modules. This is likely due to some internal module not being shared as a singleton. PR is welcome
- run
npm install
in each of fe application - run
npm start
and browse tohttp://localhost:3000
We have three next.js applications
fe-home
- port 3000fe-about
- port 3001fe-blog
- port 3002
They use omnidirectional routing, allowing pages and components to be shared and federated between apps seamlessly, creating a SPA-like experience. To avoid loading multiple React copies on server or client, hooks are used to ensure React is shared correctly. For Next.js, @module-federation/nextjs-mf must be used for proper federation support.
Explore the official example repository for more details:
https://github.com/module-federation/module-federation-examples/tree/master/nextjs-v13