- Install
@module-federation/nextjs-mf.
yarn add @module-federation/nextjs-mf- Add resolutions to
package.json:
"resolutions": {
"webpack": "5.1.3"
},- Create next.config.js.
Remote:
const {
withModuleFederation,
MergeRuntime,
} = require("@module-federation/nextjs-mf");
const path = require("path");
module.exports = {
webpack: (config, options) => {
const { buildId, dev, isServer, defaultLoaders, webpack } = options;
const mfConf = {
name: "test1",
library: { type: config.output.libraryTarget, name: "test1" },
filename: "static/runtime/remoteEntry.js",
remotes: {},
exposes: {
"./nav": "./components/nav",
},
shared: [],
};
// Configures ModuleFederation and other Webpack properties
withModuleFederation(config, options, mfConf);
config.plugins.push(new MergeRuntime());
if (!isServer) {
config.output.publicPath = "http://localhost:3000/_next/";
}
return config;
},
};Consumer:
const {
withModuleFederation,
MergeRuntime,
} = require("@module-federation/nextjs-mf");
const path = require("path");
module.exports = {
webpack: (config, options) => {
const { buildId, dev, isServer, defaultLoaders, webpack } = options;
const mfConf = {
name: "test2",
library: { type: config.output.libraryTarget, name: "test2" },
filename: "static/runtime/remoteEntry.js",
remotes: {
// For SSR, resolve to disk path (or you can use code streaming if you have access)
test1: isServer
? path.resolve(
__dirname,
"../test1/.next/server/static/runtime/remoteEntry.js"
)
: "test1", // for client, treat it as a global
},
exposes: {},
shared: [],
};
// Configures ModuleFederation and other Webpack properties
withModuleFederation(config, options, mfConf);
config.plugins.push(new MergeRuntime());
if (!isServer) {
config.output.publicPath = "http://localhost:3000/_next/";
}
return config;
},
};- Add
pages/_document.js:
Remote:
import Document, { Html, Head, Main, NextScript } from "next/document";
import { patchSharing } from "@module-federation/nextjs-mf";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
{patchSharing()}
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;Consumer:
import Document, { Html, Head, Main, NextScript } from "next/document";
import { patchSharing } from "@module-federation/nextjs-mf";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
{patchSharing()}
<script src="http://localhost:3000/_next/static/chunks/webpack.js" />
<script src="http://localhost:3000/_next/static/runtime/remoteEntry.js" />
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;- import Nav
const Nav = (await import("test1/nav")).default;Use it per normal.
Hey everyone, a quick question. So without MergeRuntime I won't be able to merge/dynamically expose my component from 1 nextjs app to another, and I've to buy the new version to achieve this? is that right?