README.md

@@ -4,11 +4,11 @@ This plugin enables Module Federation on Next.js
 
 ### Supports
 
-- next ^10.2.x || ^11.x.x || ^12.x.x
-- Client side only, SSR is another package currently in beta
+- next ^12.x.x
+- Client side only, SSR is another package currently in RC
 
 I highly recommend referencing this application which takes advantage of the best capabilities:
-https://github.com/module-federation/module-federation-examples
+https://github.com/module-federation/module-federation-examples/tree/master/nextjs
 
 ## Looking for SSR support?
 
@@ -23,34 +23,42 @@ You do not need to share these packages, sharing next internals yourself will ca
 
 ```js
 const shared = {
-    "next/dynamic": {
-        requiredVersion: false,
-        singleton: true,
-    },
-    "styled-jsx": {
-        requiredVersion: false,
-        singleton: true,
-    },
-    "next/link": {
-        requiredVersion: false,
-        singleton: true,
-    },
-    "next/router": {
-        requiredVersion: false,
-        singleton: true,
-    },
-    "next/script": {
-        requiredVersion: false,
-        singleton: true,
-    },
-    "next/head": {
-        requiredVersion: false,
-        singleton: true,
-    },
-    react: {
-        singleton: true,
-        import: false,
-    },
+  "next/dynamic": {
+    requiredVersion: false,
+    singleton: true,
+  },
+  "styled-jsx": {
+    requiredVersion: false,
+    singleton: true,
+  },
+  "next/link": {
+    requiredVersion: false,
+    singleton: true,
+  },
+  "next/router": {
+    requiredVersion: false,
+    singleton: true,
+  },
+  "next/script": {
+    requiredVersion: false,
+    singleton: true,
+  },
+  "next/head": {
+    requiredVersion: false,
+    singleton: true,
+  },
+  "react-dom": {
+    singleton: true,
+    import: false,
+  },
+  react: {
+    singleton: true,
+    import: false,
+  },
+  "react/": {
+    singleton: true,
+    import: false,
+  },
 };
 ```
 
@@ -80,32 +88,8 @@ Make sure you are using `mini-css-extract-plugin@2` - version 2 supports resolvi
 
 ## Options
 
-```js
-withFederatedSidecar(
-  {
-    name: "next2",
-    filename: "static/chunks/remoteEntry.js",
-    exposes: {
-      "./sampleComponent": "./components/sampleComponent.js",
-    },
-    shared: {
-
-    },
-  },
-  {
-    removePlugins: [
-      // optional
-      // these are the defaults
-      "BuildManifestPlugin",
-      "ReactLoadablePlugin",
-      "DropClientPage",
-      "WellKnownErrorsPlugin",
-      "ModuleFederationPlugin",
-    ],
-    publicPath: "auto", // defaults to 'auto', is optional
-  }
-);
-```
+This plugin works exactly like ModuleFederationPlugin, use it as you'd normally. 
+Note that we already share react and next stuff for you automatically.
 
 ## Demo
 
@@ -117,52 +101,72 @@ You can see it in action here: https://github.com/module-federation/module-feder
 
 ```js
 // next.config.js
-const { withFederatedSidecar } = require("@module-federation/nextjs-mf");
+const NextFederationPlugin = require('@module-federation/nextjs-mf/beta/NextFederationPlugin');
 
-module.exports = withFederatedSidecar({
-  name: "next2",
-  filename: "static/chunks/remoteEntry.js",
-  exposes: {
-    "./sampleComponent": "./components/sampleComponent.js",
-  },
-  shared: {
-
+module.exports = {
+  webpack(config, options) {
+    if (!options.isServer) {
+      config.plugins.push(
+        new NextFederationPlugin({
+          name: 'next2',
+          remotes: {
+            next1: `next1@http://localhost:3001/_next/static/chunks/remoteEntry.js`,
+          },
+          filename: 'static/chunks/remoteEntry.js',
+          exposes: {
+            './title': './components/exposedTitle.js',
+            './checkout': './pages/checkout',
+            './pages-map': './pages-map.js',
+          },
+          shared: {
+            // whatever else
+          },
+        }),
+      );
+    }
+
+    return config;
   },
-})({
-  // your original next.config.js export
-});
+};
+
+// _app.js or some other file in as high up in the app (like next's new layouts)
+// this ensures various parts of next.js are imported and "used" somewhere so that they wont be tree shaken out
+import '@module-federation/nextjs-mf/beta/include-defaults';
+
 ```
 
 2. For the consuming application, we'll call it "next1", add an instance of the ModuleFederationPlugin to your webpack config, and ensure you have a [custom Next.js App](https://nextjs.org/docs/advanced-features/custom-app) `pages/_app.js` (or `.tsx`):
+Inside that _app.js or layout.js file, ensure you import `include-defaults` file
 
 ```js
+// next.config.js
+
+const NextFederationPlugin = require('@module-federation/nextjs-mf/beta/NextFederationPlugin');
+
 module.exports = {
   webpack(config, options) {
-    config.plugins.push(
-      new options.webpack.container.ModuleFederationPlugin({
-        remotes: {
-          next2: "next2@http://pathToRemotejs",
-          // if you embed the script into the document manually
-          next2: "next2",
-        },
-        shared: {
-
-        },
-      })
-    );
-
-    // we attach next internals to share scope at runtime
-    config.module.rules.push({
-      test: /pages\/_app.[jt]sx?/,
-      loader: "@module-federation/nextjs-mf/lib/federation-loader.js",
-    });
+    if (!options.isServer) {
+      config.plugins.push(
+        new NextFederationPlugin({
+          name: 'next1',
+          remotes: {
+            next2: `next2@http://localhost:3000/_next/static/chunks/remoteEntry.js`,
+          },
+        }),
+      );
+    }
 
     return config;
   },
 };
+
+// _app.js or some other file in as high up in the app (like next's new layouts)
+// this ensures various parts of next.js are imported and "used" somewhere so that they wont be tree shaken out
+import '@module-federation/nextjs-mf/beta/include-defaults';
+
 ```
 
-4Use next/dynamic or low level api to import remotes.
+4. Use next/dynamic or low level api to import remotes.
 
 ```js
 import dynamic from "next/dynamic";