jherr · October 19, 2024 23:55 · Oct 29, 2020 · Oct 28, 2020 · Oct 28, 2020 · Oct 28, 2020
diff --git a/WP5-nextjs.md b/WP5-nextjs.md
@@ -1,4 +1,4 @@
-1. Install `@module-federation/nexjts-mf`.
+1. Install `@module-federation/nextjs-mf`.
 
 ```sh
 yarn add @module-federation/nextjs-mf

diff --git a/WP5-nextjs.md b/WP5-nextjs.md
@@ -8,19 +8,11 @@ yarn add @module-federation/nextjs-mf
 
 ```json
   "resolutions": {
-    "webpack": "5.1.3",
-    "next": "9.5.5"
+    "webpack": "5.1.3"
   },
 ```
 
-3. Update next version to canary.
-
-```json
-  "dependencies": {
-    "next": "^9.5.6-canary.0",
-```
-
-4. Create next.config.js.
+3. Create next.config.js.
 
 Remote: 
 
@@ -102,7 +94,7 @@ module.exports = {
 };
 ```
 
-6. Add `pages/_document.js`:
+4. Add `pages/_document.js`:
 
 Remote:
 
@@ -164,7 +156,7 @@ class MyDocument extends Document {
 export default MyDocument;
 ```
 
-7. import Nav
+5. import Nav
 
 ```js
 const Nav = (await import("test1/nav")).default;

diff --git a/WP5-nextjs.md b/WP5-nextjs.md
@@ -1,7 +1,7 @@
 1. Install `@module-federation/nexjts-mf`.
 
 ```sh
-yarn add @module-federation/nextjs-mf@0.0.1-beta.4
+yarn add @module-federation/nextjs-mf
 ```
 
 2. Add resolutions to `package.json`:

diff --git a/WP5-nextjs.md b/WP5-nextjs.md
@@ -25,7 +25,10 @@ yarn add @module-federation/[email protected]
 Remote: 
 
 ```js
-const { withModuleFederation } = require("@module-federation/nextjs-mf");
+const {
+  withModuleFederation,
+  MergeRuntime,
+} = require("@module-federation/nextjs-mf");
 const path = require("path");
 
 module.exports = {
@@ -45,6 +48,8 @@ module.exports = {
     // Configures ModuleFederation and other Webpack properties
     withModuleFederation(config, options, mfConf);
 
+    config.plugins.push(new MergeRuntime());
+
     if (!isServer) {
       config.output.publicPath = "http://localhost:3000/_next/";
     }
@@ -57,7 +62,10 @@ module.exports = {
 Consumer: 
 
 ```js
-const { withModuleFederation } = require("@module-federation/nextjs-mf");
+const {
+  withModuleFederation,
+  MergeRuntime,
+} = require("@module-federation/nextjs-mf");
 const path = require("path");
 
 module.exports = {
@@ -83,6 +91,8 @@ module.exports = {
     // Configures ModuleFederation and other Webpack properties
     withModuleFederation(config, options, mfConf);
 
+    config.plugins.push(new MergeRuntime());
+
     if (!isServer) {
       config.output.publicPath = "http://localhost:3000/_next/";
     }

diff --git a/WP5-nextjs.md b/WP5-nextjs.md
@@ -25,7 +25,7 @@ yarn add @module-federation/[email protected]
 Remote: 
 
 ```js
-const { withModuleFederation } = require("@module-federation/nexjts-mf");
+const { withModuleFederation } = require("@module-federation/nextjs-mf");
 const path = require("path");
 
 module.exports = {
@@ -57,7 +57,7 @@ module.exports = {
 Consumer: 
 
 ```js
-const { withModuleFederation } = require("@module-federation/nexjts-mf");
+const { withModuleFederation } = require("@module-federation/nextjs-mf");
 const path = require("path");
 
 module.exports = {
@@ -98,7 +98,7 @@ Remote:
 
 ```js
 import Document, { Html, Head, Main, NextScript } from "next/document";
-import { patchSharing } from "@module-federation/nexjts-mf";
+import { patchSharing } from "@module-federation/nextjs-mf";
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
@@ -127,7 +127,7 @@ Consumer:
 
 ```js
 import Document, { Html, Head, Main, NextScript } from "next/document";
-import { patchSharing } from "@module-federation/nexjts-mf";
+import { patchSharing } from "@module-federation/nextjs-mf";
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {

diff --git a/WP5-nextjs.md b/WP5-nextjs.md
@@ -1,7 +1,7 @@
 1. Install `@module-federation/nexjts-mf`.
 
 ```sh
-yarn add @module-federation/nexjts-mf
+yarn add @module-federation/nextjs-mf@0.0.1-beta.4
 ```
 
 2. Add resolutions to `package.json`:

diff --git a/WP5-nextjs.md b/WP5-nextjs.md
@@ -0,0 +1,163 @@
+1. Install `@module-federation/nexjts-mf`.
+
+```sh
+yarn add @module-federation/nexjts-mf
+```
+
+2. Add resolutions to `package.json`:
+
+```json
+  "resolutions": {
+    "webpack": "5.1.3",
+    "next": "9.5.5"
+  },
+```
+
+3. Update next version to canary.
+
+```json
+  "dependencies": {
+    "next": "^9.5.6-canary.0",
+```
+
+4. Create next.config.js.
+
+Remote: 
+
+```js
+const { withModuleFederation } = require("@module-federation/nexjts-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);
+
+    if (!isServer) {
+      config.output.publicPath = "http://localhost:3000/_next/";
+    }
+
+    return config;
+  },
+};
+```
+
+Consumer: 
+
+```js
+const { withModuleFederation } = require("@module-federation/nexjts-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);
+
+    if (!isServer) {
+      config.output.publicPath = "http://localhost:3000/_next/";
+    }
+
+    return config;
+  },
+};
+```
+
+6. Add `pages/_document.js`:
+
+Remote:
+
+```js
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { patchSharing } from "@module-federation/nexjts-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:
+
+```js
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { patchSharing } from "@module-federation/nexjts-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;
+```
+
+7. import Nav
+
+```js
+const Nav = (await import("test1/nav")).default;
+```
+
+Use it per normal.