Next.js 13 with MF

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

Getting Started

1. run npm install in each of fe application
2. run npm start and browse to http://localhost:3000

Context

We have three next.js applications

• fe-home - port 3000
• fe-about - port 3001
• fe-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.

Reference

Explore the official example repository for more details:
https://github.com/module-federation/module-federation-examples/tree/master/nextjs-v13