Module Federation in Next.js depends on @module-federation/nextjs-mf It will not work unless you have access to this plugin, which is not free.
Due to the effort to support Next.js and funding constraints, I have moved the plugin to a paid model.
- run
npm install @module-federation/nextjs-mf --registry https://r.privjs.com
with npm 7 or install it directly in each folder/app, note the plugin is not free. - run
yarn start
and browse tohttp://localhost:3000
,http://localhost:3001
, orhttp://localhot:3002
Looking for SSR over fetch()
or architecture support and designs for module federation and Next.js?
Contact me [email protected] or @ScriptedAlchemy on Twitter
All solutions for next.js currently require a paid access or paid plugin
We have three next.js applications
checkout
- port 3000home
- port 3001shop
- port 3002
The applications utilize omnidirectional routing and pages or components are able to be federated between applications like a SPA
I am using hooks here to ensure multiple copies of react are not loaded into scope on server or client.
Next.js does not have an async boundary. Between the entrypoint and the shared code. Read this for more context: https://github.com/sokra/slides/blob/master/content/ModuleFederationWebpack5.md
In order for webpack to figure out who shares what, an async boundary is typically needed somewhere before the module is used.
Usually, we can work around async boundaries for things like react
by specifying the following
const config = {
shared: {
react: {
eager: true,
singleton: true,
},
},
};
However, in the case of Next.js - you need to use @module-federation/nextjs-mf
I do have some helpful examples floating around, hopefully these will be of use.
Next.js specific:
- module-federation#155
- https://github.com/module-federation/module-federation-examples/blob/master/nextjs-sidecar/
SSR Specific:
Useful files in the SSR build.
- https://github.com/module-federation/module-federation-examples/blob/master/server-side-rendering/website1/build/webpack.config.js/server.base.js
- https://github.com/module-federation/module-federation-examples/blob/master/server-side-rendering/website1/build/webpack.config.js/client.base.js
- Entrypoint - https://github.com/module-federation/module-federation-examples/blob/master/server-side-rendering/website1/server/index.js
- Async import middleware - https://github.com/module-federation/module-federation-examples/blob/master/server-side-rendering/website1/server/server-entry.js
The async import middleware is where i keep the async boundary, this is also the only point of reference where React is import into scope.
By doing so, I can ensure that webpack has time to initialize and load anything it might need before attempting to actually require, and render the application.