This plugin enables Module Federation on Next.js
I highly recommend referencing this application which takes advantage of the best capabilities: https://github.com/module-federation/module-federation-examples
I set process.env.NEXT_PRIVATE_LOCAL_WEBPACK = 'true'
inside this plugin, but its best if its set in env or command line export.
"Local Webpack" means you must have webpack installed as a dependency, and next will not use its bundled copy of webpack which cannot be used as i need access to all of webpack internals
cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next dev
or next build
npm install webpack
To avoid hydration errors, use React.lazy
instead of next/dynamic
for lazy loading federated components.
With async boundary installed at the page level. You can then do the following
You can see it in action here: https://github.com/module-federation/module-federation-examples/tree/master/nextjs-ssr
This plugin works exactly like ModuleFederationPlugin, use it as you'd normally. Note that we already share react and next stuff for you automatically.
Also NextFederationPlugin has own optional argument extraOptions
where you can unlock additional features of this plugin:
debug
– enables debug mode. It will print additional information about what is going on under the hood.exposePages
– exposes automatically all nextjs pages for you and theirs ./pages-map
.enableImageLoaderFix
– adds public hostname to all assets bundled by nextjs-image-loader
. So if you serve remoteEntry from http://example.com
then all bundled assets will get this hostname in runtime. It's something like Base URL in HTML but for federated modules.enableUrlLoaderFix
– adds public hostname to all assets bundled by url-loader
.skipSharingNextInternals
– disables sharing of next internals. You can use it if you want to share next internals yourself or want to use this plugin on non next applicationsYou can see it in action here: https://github.com/module-federation/module-federation-examples/pull/2147
NextFederationPlugin
in your next.config.js
of the app that you wish to expose modules from. We'll call this "next2".To provide extensibility and "middleware" for federation, you can refer to @module-federation/enhanced/runtime
loadRemote
has been removed - you can take advantage of the new runtime apis: https://module-federation.io/guide/basic/runtime.html#loadremote
revalidate
Enables hot reloading of node server (not client) in production. This is recommended, without it - servers will not be able to pull remote updates without a full restart.
More info here: https://github.com/module-federation/nextjs-mf/tree/main/packages/node#utilities
Hot reloading Express.js required additional steps: https://github.com/module-federation/core/blob/main/packages/node/README.md
Under the hood we share some next internals automatically You do not need to share these packages, sharing next internals yourself will cause errors.
DEFAULT_SHARE_SCOPE
: