diff --git a/README.md b/README.md
index 6be7d290eba..cfa577c2150 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,7 @@ This repository is to showcase examples of how Webpack 5's new Module Federation
 - [x] [Angular Universal](./angular-universal-ssr/README.md) — Remote and Host app with SSR, lazy modules and components.
 - [x] [NextJS Sidecar Build](./nextjs-sidecar/README.md) — Sidecar build to enable module-federation alongside Next codebases.
 - [x] 💰[NextJS](./nextjs/README.md) — Operation, with [nextjs-mf](https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-mf).
-- [x] 💰[NextJS SSR](./nextjs-ssr/README.md) — Powered by software streams, with [nextjs-ssr](https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-ssr) 
+- [x] 💰[NextJS SSR](./nextjs-ssr/README.md) — Powered by software streams, with [nextjs-ssr](https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-ssr)
 - [x] [Building A Plugin-based Workflow Designer With Angular and Module Federation](https://github.com/manfredsteyer/module-federation-with-angular-dynamic-workflow-designer) — External Example
 - [x] [Vue.js](./vue3-demo/README.md) — Simple host/remote (render function / sfc) example using Vue 3.0.
 - [x] [Vue 2 in Vue 3](./vue2-in-vue3/README.md) — Vue 3 application loading remote Vue 2 component.
diff --git a/nextjs-ssr/checkout/async-pages/app.js b/nextjs-ssr/checkout/async-pages/app.js
index 910c55f36e2..217d14b3df1 100644
--- a/nextjs-ssr/checkout/async-pages/app.js
+++ b/nextjs-ssr/checkout/async-pages/app.js
@@ -1,4 +1,4 @@
-import App from "next/app";
+import App from 'next/app';
 import dynamic from 'next/dynamic';
 const Nav = dynamic(() => {
   return import('home/nav');
@@ -13,9 +13,8 @@ function MyApp({ Component, pageProps }) {
   );
 }
 
-
 MyApp.getInitialProps = async ctx => {
-    const appProps = await App.getInitialProps(ctx);
-    return appProps
-}
+  const appProps = await App.getInitialProps(ctx);
+  return appProps;
+};
 export default MyApp;
diff --git a/nextjs-ssr/checkout/package.json b/nextjs-ssr/checkout/package.json
index bfc280c341e..380933c322c 100644
--- a/nextjs-ssr/checkout/package.json
+++ b/nextjs-ssr/checkout/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "nextjs-shared": "*",
-    "@module-federation/nextjs-ssr": "0.1.0-rc.5",
+    "@module-federation/nextjs-ssr": "0.1.0-rc.6",
     "lodash": "4.17.21",
     "next": "12.1.0",
     "next-compose-plugins": "^2.2.1",
diff --git a/nextjs-ssr/home/async-pages/_app.js b/nextjs-ssr/home/async-pages/_app.js
index 950887cf2cc..4de993d237c 100644
--- a/nextjs-ssr/home/async-pages/_app.js
+++ b/nextjs-ssr/home/async-pages/_app.js
@@ -1,18 +1,17 @@
-import App from "next/app";
+import App from 'next/app';
 import Nav from '../components/nav';
 
-function MyApp({Component, pageProps}) {
-    return (
-        <>
-            <Nav/>
-            <Component {...pageProps} />
-        </>
-    );
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Nav />
+      <Component {...pageProps} />
+    </>
+  );
 }
 
 MyApp.getInitialProps = async ctx => {
-    const appProps = await App.getInitialProps(ctx);
-    return appProps
-}
+  const appProps = await App.getInitialProps(ctx);
+  return appProps;
+};
 export default MyApp;
-
diff --git a/nextjs-ssr/home/components/helloWorld.js b/nextjs-ssr/home/components/helloWorld.js
index f935b54820f..f24cc0c8b51 100644
--- a/nextjs-ssr/home/components/helloWorld.js
+++ b/nextjs-ssr/home/components/helloWorld.js
@@ -1,3 +1,3 @@
 export const HelloWorld = () => {
-    return <>Hello World</>
-}
\ No newline at end of file
+  return <>Hello World</>;
+};
diff --git a/nextjs-ssr/home/components/nav.js b/nextjs-ssr/home/components/nav.js
index 8a7b3439602..c5252e8cfe2 100644
--- a/nextjs-ssr/home/components/nav.js
+++ b/nextjs-ssr/home/components/nav.js
@@ -2,15 +2,9 @@ import React from 'react';
 import Link from 'next/link';
 import dynamic from 'next/dynamic';
 
-export const HelloWorld = dynamic(
-    () =>
-        import("./helloWorld").then(
-            (mod) => mod.HelloWorld
-        ),
-    {
-      ssr: true,
-    }
-);
+export const HelloWorld = dynamic(() => import('./helloWorld').then(mod => mod.HelloWorld), {
+  ssr: true,
+});
 const links = [
   { href: 'https://zeit.co/now', label: 'ZEIT' },
   { href: 'https://github.com/zeit/next.js', label: 'GitHub' },
@@ -21,7 +15,7 @@ const links = [
 
 const Nav = () => (
   <nav>
-      <HelloWorld/>
+    <HelloWorld />
     <ul>
       <li>
         <Link href="/">
diff --git a/nextjs-ssr/home/package.json b/nextjs-ssr/home/package.json
index 3eccfc2134e..6fa00c36350 100644
--- a/nextjs-ssr/home/package.json
+++ b/nextjs-ssr/home/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "nextjs-shared": "*",
-    "@module-federation/nextjs-ssr": "0.1.0-rc.5",
+    "@module-federation/nextjs-ssr": "0.1.0-rc.6",
     "lodash": "4.17.21",
     "next": "12.1.0",
     "next-compose-plugins": "^2.2.1",
diff --git a/nextjs-ssr/home/pages/checkout.js b/nextjs-ssr/home/pages/checkout.js
index 82a612714ea..ad97161e1e0 100644
--- a/nextjs-ssr/home/pages/checkout.js
+++ b/nextjs-ssr/home/pages/checkout.js
@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic';
 
 const Page = dynamic(() => import('checkout/checkout'));
 Page.getInitialProps = async ctx => {
-  const page = import('checkout/checkout')
+  const page = import('checkout/checkout');
   const getInitialProps = (await page).default?.getInitialProps;
   if (getInitialProps) {
     return getInitialProps(ctx);
diff --git a/nextjs-ssr/shop/async-pages/_app.js b/nextjs-ssr/shop/async-pages/_app.js
index 45a8d64f4d3..7d959427896 100644
--- a/nextjs-ssr/shop/async-pages/_app.js
+++ b/nextjs-ssr/shop/async-pages/_app.js
@@ -1,4 +1,4 @@
-import App from "next/app";
+import App from 'next/app';
 import dynamic from 'next/dynamic';
 const Nav = dynamic(() => import('home/nav'));
 
@@ -11,7 +11,7 @@ function MyApp({ Component, pageProps }) {
   );
 }
 MyApp.getInitialProps = async ctx => {
-    const appProps = await App.getInitialProps(ctx);
-    return appProps
-}
+  const appProps = await App.getInitialProps(ctx);
+  return appProps;
+};
 export default MyApp;
diff --git a/nextjs-ssr/shop/package.json b/nextjs-ssr/shop/package.json
index f91f73075ee..851df6e6c66 100644
--- a/nextjs-ssr/shop/package.json
+++ b/nextjs-ssr/shop/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "nextjs-shared": "*",
-    "@module-federation/nextjs-ssr": "0.1.0-rc.5",
+    "@module-federation/nextjs-ssr": "0.1.0-rc.6",
     "lodash": "4.17.21",
     "next": "12.1.0",
     "next-compose-plugins": "^2.2.1",
diff --git a/nextjs-ssr/yarn.lock b/nextjs-ssr/yarn.lock
index 71b30a034db..424d0f2283d 100644
--- a/nextjs-ssr/yarn.lock
+++ b/nextjs-ssr/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@module-federation/nextjs-ssr@0.1.0-rc.5":
-  version "0.1.0-rc.5"
-  resolved "http://r.privjs.com/@module-federation%2fnextjs-ssr/-/nextjs-ssr-0.1.0-rc.5.tgz#bf2c903b9fac8377981a317172427513eed8b572"
-  integrity sha512-gxIHXFSLfIg9aDAE69eKKxeM+PVJXNApsa1HBxtb/MFUbZprnR9hg9YJq2cd1LBewk1FAc/TrkeCtbtCNQb+vA==
+"@module-federation/nextjs-ssr@0.1.0-rc.6":
+  version "0.1.0-rc.6"
+  resolved "http://r.privjs.com/@module-federation%2fnextjs-ssr/-/nextjs-ssr-0.1.0-rc.6.tgz#a65bcb4371b686ecfda9f8171d20a89ef9f5c03b"
+  integrity sha512-BJeyNBy0uhwKnyCCgD8mmM1npIlFMVKFo93Ayd+sm+mZrAsLWC2fgfFQ+JMppCgtQYyebo5OE+MVmMhaWxoHvg==
   dependencies:
     chalk "4.1.2"
     encoding "^0.1.13"
diff --git a/nextjs/checkout/package.json b/nextjs/checkout/package.json
index dc5ab869ec0..baaafdacc1d 100644
--- a/nextjs/checkout/package.json
+++ b/nextjs/checkout/package.json
@@ -8,14 +8,14 @@
     "start": "next start"
   },
   "dependencies": {
-    "nextjs-shared": "*",
-    "@module-federation/nextjs-mf": "^3.3.0",
+    "@module-federation/nextjs-mf": "3.5.0",
     "lodash": "4.17.21",
-    "next": "12.1.0",
+    "next": "12.1.6",
     "next-compose-plugins": "^2.2.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "webpack": "5.70.0",
+    "nextjs-shared": "*",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "webpack": "5.72.0",
     "webpack-merge": "^5.8.0"
   }
 }
diff --git a/nextjs/checkout/pages/[...slug].js b/nextjs/checkout/pages/[...slug].js
index 6a88850632c..3a38dc46b57 100644
--- a/nextjs/checkout/pages/[...slug].js
+++ b/nextjs/checkout/pages/[...slug].js
@@ -1,3 +1,11 @@
-import { createFederatedCatchAll } from 'nextjs-shared';
-
-export default createFederatedCatchAll(['home', 'shop']);
+import dynamic from 'next/dynamic';
+const page = import('../realPages/[...slug]');
+const Page = dynamic(() => import('../realPages/[...slug]'));
+Page.getInitialProps = async ctx => {
+  const getInitialProps = (await page).default?.getInitialProps;
+  if (getInitialProps) {
+    return getInitialProps(ctx);
+  }
+  return {};
+};
+export default Page;
diff --git a/nextjs/checkout/pages/_app.js b/nextjs/checkout/pages/_app.js
index 10b4a60344e..935ad443336 100644
--- a/nextjs/checkout/pages/_app.js
+++ b/nextjs/checkout/pages/_app.js
@@ -1,20 +1,19 @@
+import { Suspense } from 'react';
+import App from 'next/app';
 import dynamic from 'next/dynamic';
-const Nav = dynamic(
-  () => {
-    const mod = import('home/nav');
-    console.log(mod);
-    return mod;
-  },
-  { ssr: false },
-);
+const page = import('../realPages/_app');
 
-function MyApp({ Component, pageProps }) {
-  return (
-    <>
-      <Nav />
-      <Component {...pageProps} />
-    </>
-  );
-}
+const Page = dynamic(() => import('../realPages/_app'));
+Page.getInitialProps = async ctx => {
+  const appProps = await App.getInitialProps(ctx);
 
-export default MyApp;
+  const getInitialProps = (await page).default?.getInitialProps;
+  if (getInitialProps) {
+    return {
+      ...appProps,
+      ...getInitialProps(ctx),
+    };
+  }
+  return { ...appProps };
+};
+export default Page;
diff --git a/nextjs/checkout/pages/checkout.js b/nextjs/checkout/pages/checkout.js
index 9028d658675..af429729a9c 100644
--- a/nextjs/checkout/pages/checkout.js
+++ b/nextjs/checkout/pages/checkout.js
@@ -1,44 +1,12 @@
-import React from 'react';
-import Head from 'next/head';
+import dynamic from 'next/dynamic';
+const page = import('../realPages/checkout');
 
-const Checkout = props => (
-  <div>
-    <Head>
-      <title>checkout</title>
-      <link rel="icon" href="/favicon.ico" />
-    </Head>
-
-    <div className="hero">
-      <h1>checkout page</h1>
-      <h3 className="title">This is a federated page owned by localhost:3000</h3>
-      <span>
-        {' '}
-        Data from federated <pre>getInitalProps</pre>
-      </span>
-      <br />
-      <pre>{JSON.stringify(props, null, 2)}</pre>
-    </div>
-    <style jsx>{`
-      .hero {
-        width: 100%;
-        color: #333;
-      }
-      .title {
-        margin: 0;
-        width: 100%;
-        padding-top: 80px;
-        line-height: 1.15;
-        font-size: 20px;
-      }
-      .title,
-      .description {
-        text-align: center;
-      }
-    `}</style>
-  </div>
-);
-Checkout.getInitialProps = async () => {
-  const swapi = await fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
-  return swapi;
+const Page = dynamic(() => import('../realPages/checkout'));
+Page.getInitialProps = async ctx => {
+  const getInitialProps = (await page).default?.getInitialProps;
+  if (getInitialProps) {
+    return getInitialProps(ctx);
+  }
+  return {};
 };
-export default Checkout;
+export default Page;
diff --git a/nextjs/checkout/pages/index.js b/nextjs/checkout/pages/index.js
index 6a88850632c..58783f4ee00 100644
--- a/nextjs/checkout/pages/index.js
+++ b/nextjs/checkout/pages/index.js
@@ -1,3 +1,12 @@
-import { createFederatedCatchAll } from 'nextjs-shared';
+import dynamic from 'next/dynamic';
+const page = import('../realPages/index');
 
-export default createFederatedCatchAll(['home', 'shop']);
+const Page = dynamic(() => import('../realPages/index'));
+Page.getInitialProps = async ctx => {
+  const getInitialProps = (await page).default?.getInitialProps;
+  if (getInitialProps) {
+    return getInitialProps(ctx);
+  }
+  return {};
+};
+export default Page;
diff --git a/nextjs/checkout/pages/shop/mybag.js b/nextjs/checkout/pages/shop/mybag.js
index 6f5d2b72212..ef16a95e06f 100644
--- a/nextjs/checkout/pages/shop/mybag.js
+++ b/nextjs/checkout/pages/shop/mybag.js
@@ -1,39 +1,12 @@
-import React from 'react';
-import Head from 'next/head';
+import dynamic from 'next/dynamic';
+const page = import('../../realPages/shop/mybag');
 
-const MyBag = props => (
-  <div>
-    <Head>
-      <title>My Bag</title>
-      <link rel="icon" href="/favicon.ico" />
-    </Head>
-
-    <div className="hero">
-      <h1>my bag page</h1>
-      <h3 className="title">This is a federated page, consumed by localhost:3001</h3>
-      <br />
-    </div>
-    <style jsx>{`
-      .hero {
-        width: 100%;
-        color: #333;
-      }
-      .title {
-        margin: 0;
-        width: 100%;
-        padding-top: 80px;
-        line-height: 1.15;
-        font-size: 20px;
-      }
-      .title,
-      .description {
-        text-align: center;
-      }
-    `}</style>
-  </div>
-);
-MyBag.getInitialProps = async () => {
-  const swapi = await fetch('https://swapi.dev/api/people/1').then(res => res.json());
-  return swapi;
+const Page = dynamic(() => import('../../realPages/shop/mybag'));
+Page.getInitialProps = async ctx => {
+  const getInitialProps = (await page).default?.getInitialProps;
+  if (getInitialProps) {
+    return getInitialProps(ctx);
+  }
+  return {};
 };
-export default MyBag;
+export default Page;
diff --git a/nextjs/checkout/realPages/[...slug].js b/nextjs/checkout/realPages/[...slug].js
index 909b97340a2..391d8e662a2 100644
--- a/nextjs/checkout/realPages/[...slug].js
+++ b/nextjs/checkout/realPages/[...slug].js
@@ -1,12 +1,6 @@
+import { createFederatedCatchAll } from 'nextjs-shared';
+
+export default createFederatedCatchAll(['home', 'shop']);
+
 import dynamic from 'next/dynamic';
 const page = import('../realPages/[...slug]');
-
-const Page = dynamic(() => page);
-Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
-  if (getInitialProps) {
-    return getInitialProps(ctx);
-  }
-  return {};
-};
-export default Page;
diff --git a/nextjs/checkout/realPages/_app.js b/nextjs/checkout/realPages/_app.js
index deaca69c64c..10b4a60344e 100644
--- a/nextjs/checkout/realPages/_app.js
+++ b/nextjs/checkout/realPages/_app.js
@@ -1,12 +1,20 @@
 import dynamic from 'next/dynamic';
-const page = import('../realPages/_app');
+const Nav = dynamic(
+  () => {
+    const mod = import('home/nav');
+    console.log(mod);
+    return mod;
+  },
+  { ssr: false },
+);
 
-const Page = dynamic(() => page);
-Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
-  if (getInitialProps) {
-    return getInitialProps(ctx);
-  }
-  return {};
-};
-export default Page;
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Nav />
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+export default MyApp;
diff --git a/nextjs/checkout/realPages/checkout.js b/nextjs/checkout/realPages/checkout.js
index 3677e2b68d9..9028d658675 100644
--- a/nextjs/checkout/realPages/checkout.js
+++ b/nextjs/checkout/realPages/checkout.js
@@ -1,12 +1,44 @@
-import dynamic from 'next/dynamic';
-const page = import('../realPages/checkout');
+import React from 'react';
+import Head from 'next/head';
 
-const Page = dynamic(() => page);
-Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
-  if (getInitialProps) {
-    return getInitialProps(ctx);
-  }
-  return {};
+const Checkout = props => (
+  <div>
+    <Head>
+      <title>checkout</title>
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+
+    <div className="hero">
+      <h1>checkout page</h1>
+      <h3 className="title">This is a federated page owned by localhost:3000</h3>
+      <span>
+        {' '}
+        Data from federated <pre>getInitalProps</pre>
+      </span>
+      <br />
+      <pre>{JSON.stringify(props, null, 2)}</pre>
+    </div>
+    <style jsx>{`
+      .hero {
+        width: 100%;
+        color: #333;
+      }
+      .title {
+        margin: 0;
+        width: 100%;
+        padding-top: 80px;
+        line-height: 1.15;
+        font-size: 20px;
+      }
+      .title,
+      .description {
+        text-align: center;
+      }
+    `}</style>
+  </div>
+);
+Checkout.getInitialProps = async () => {
+  const swapi = await fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
+  return swapi;
 };
-export default Page;
+export default Checkout;
diff --git a/nextjs/checkout/realPages/index.js b/nextjs/checkout/realPages/index.js
index f2f1f40f503..6a88850632c 100644
--- a/nextjs/checkout/realPages/index.js
+++ b/nextjs/checkout/realPages/index.js
@@ -1,12 +1,3 @@
-import dynamic from 'next/dynamic';
-const page = import('../realPages/index');
+import { createFederatedCatchAll } from 'nextjs-shared';
 
-const Page = dynamic(() => page);
-Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
-  if (getInitialProps) {
-    return getInitialProps(ctx);
-  }
-  return {};
-};
-export default Page;
+export default createFederatedCatchAll(['home', 'shop']);
diff --git a/nextjs/checkout/realPages/shop/mybag.js b/nextjs/checkout/realPages/shop/mybag.js
index 5f0ad245713..6f5d2b72212 100644
--- a/nextjs/checkout/realPages/shop/mybag.js
+++ b/nextjs/checkout/realPages/shop/mybag.js
@@ -1,12 +1,39 @@
-import dynamic from 'next/dynamic';
-const page = import('../../realPages/shop/mybag');
+import React from 'react';
+import Head from 'next/head';
 
-const Page = dynamic(() => page);
-Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
-  if (getInitialProps) {
-    return getInitialProps(ctx);
-  }
-  return {};
+const MyBag = props => (
+  <div>
+    <Head>
+      <title>My Bag</title>
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
+
+    <div className="hero">
+      <h1>my bag page</h1>
+      <h3 className="title">This is a federated page, consumed by localhost:3001</h3>
+      <br />
+    </div>
+    <style jsx>{`
+      .hero {
+        width: 100%;
+        color: #333;
+      }
+      .title {
+        margin: 0;
+        width: 100%;
+        padding-top: 80px;
+        line-height: 1.15;
+        font-size: 20px;
+      }
+      .title,
+      .description {
+        text-align: center;
+      }
+    `}</style>
+  </div>
+);
+MyBag.getInitialProps = async () => {
+  const swapi = await fetch('https://swapi.dev/api/people/1').then(res => res.json());
+  return swapi;
 };
-export default Page;
+export default MyBag;
diff --git a/nextjs/home/package.json b/nextjs/home/package.json
index 1f6f6787bf7..1eebed7053a 100644
--- a/nextjs/home/package.json
+++ b/nextjs/home/package.json
@@ -9,13 +9,13 @@
   },
   "dependencies": {
     "nextjs-shared": "*",
-    "@module-federation/nextjs-mf": "^3.3.0",
+    "@module-federation/nextjs-mf": "^3.5.0",
     "lodash": "4.17.21",
-    "next": "12.1.0",
+    "next": "12.1.6",
     "next-compose-plugins": "^2.2.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "webpack": "5.70.0",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "webpack": "5.72.1",
     "webpack-merge": "^5.8.0"
   }
 }
diff --git a/nextjs/home/pages/[...slug].js b/nextjs/home/pages/[...slug].js
index 909b97340a2..f3a02d69d27 100644
--- a/nextjs/home/pages/[...slug].js
+++ b/nextjs/home/pages/[...slug].js
@@ -1,9 +1,9 @@
 import dynamic from 'next/dynamic';
 const page = import('../realPages/[...slug]');
 
-const Page = dynamic(() => page);
+const Page = dynamic(() => import('../realPages/[...slug]'));
 Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
+  const getInitialProps = (await page).default?.getInitialProps;
   if (getInitialProps) {
     return getInitialProps(ctx);
   }
diff --git a/nextjs/home/pages/_app.js b/nextjs/home/pages/_app.js
index deaca69c64c..c7d76aa7dfc 100644
--- a/nextjs/home/pages/_app.js
+++ b/nextjs/home/pages/_app.js
@@ -1,12 +1,24 @@
+import { Suspense } from 'react';
+import App from 'next/app';
 import dynamic from 'next/dynamic';
 const page = import('../realPages/_app');
 
-const Page = dynamic(() => page);
+const Home = dynamic(() => import('../realPages/_app'), { suspense: true });
+const Page = props => (
+  <Suspense>
+    <Home {...props} />
+  </Suspense>
+);
 Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
+  const appProps = await App.getInitialProps(ctx);
+
+  const getInitialProps = (await page).default?.getInitialProps;
   if (getInitialProps) {
-    return getInitialProps(ctx);
+    return {
+      ...appProps,
+      ...getInitialProps(ctx),
+    };
   }
-  return {};
+  return { ...appProps };
 };
 export default Page;
diff --git a/nextjs/home/pages/index.js b/nextjs/home/pages/index.js
index f2f1f40f503..62f5ec1ea4e 100644
--- a/nextjs/home/pages/index.js
+++ b/nextjs/home/pages/index.js
@@ -1,9 +1,9 @@
 import dynamic from 'next/dynamic';
 const page = import('../realPages/index');
 
-const Page = dynamic(() => page);
+const Page = dynamic(() => import('../realPages/index'), { suspense: true });
 Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
+  const getInitialProps = (await page).default?.getInitialProps;
   if (getInitialProps) {
     return getInitialProps(ctx);
   }
diff --git a/nextjs/home/realPages/index.js b/nextjs/home/realPages/index.js
index c83fb9cc72f..d08245ddbf6 100644
--- a/nextjs/home/realPages/index.js
+++ b/nextjs/home/realPages/index.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, Suspense } from 'react';
 import Head from 'next/head';
 import dynamic from 'next/dynamic';
 let useCustomHook;
diff --git a/nextjs/index.spec.js b/nextjs/index.spec.js
deleted file mode 100644
index 38fbbffe11e..00000000000
--- a/nextjs/index.spec.js
+++ /dev/null
@@ -1,83 +0,0 @@
-const fs = require('fs');
-const spawn = require('cross-spawn');
-const { resolve } = require('path');
-
-const isHiddenDirectory = function (path) {
-  return /(^|\/)\.[^\/\.]/g.test(path);
-};
-
-const blockDir = ['node_modules', 'public', 'dist'];
-
-const folders = [
-  'basic-host-remote',
-  'bi-directional',
-  'startup-code',
-  'different-react-versions',
-  'self-healing',
-  'comprehensive-demo',
-  'server-side-rendering',
-  'server-side-render-only',
-  'dynamic-system-host',
-  'shared-context',
-  'shared-routing',
-  'shared-routes2',
-  'typescript',
-  'nested',
-  'nextjs-sidecar',
-  'version-discrepancy',
-  'dashboard-example',
-  'redux-reducer-injection',
-  'angular-universal-ssr',
-  'advanced-api/dynamic-remotes',
-  'advanced-api/automatic-vendor-sharing',
-  'nextjs-bi-directional',
-  'vue3-demo',
-  'nextjs',
-];
-
-function spawnAsPromise(cmd, args, options) {
-  return new Promise((resolve, reject) => {
-    const child = spawn(cmd, args, options);
-    child.on('close', code => {
-      code === 0 ? resolve(true) : reject(false);
-    });
-    child.on('error', () => {
-      reject(false);
-    });
-  });
-}
-
-function getFiles(source) {
-  const result = [];
-  function walk(src) {
-    const dirents = fs.readdirSync(src, { withFileTypes: true });
-    for (const dirent of dirents) {
-      if (
-        dirent.isDirectory() &&
-        !isHiddenDirectory(dirent.name) &&
-        !blockDir.includes(dirent.name)
-      ) {
-        const resolvedPath = resolve(src, dirent.name);
-        const hasPkgJson = fs.existsSync(`${resolvedPath}/package.json`);
-        if (hasPkgJson) {
-          result.push(resolvedPath);
-        }
-        walk(resolvedPath);
-      }
-    }
-  }
-  walk(source);
-  return result;
-}
-
-for (const folder of folders) {
-  describe(`${folder}`, () => {
-    const apps = getFiles(resolve(__dirname, '..', folder));
-    for (app of apps) {
-      it(`${app} should build`, async () => {
-        const result = await spawnAsPromise('yarn', ['build'], { cwd: app });
-        expect(result).toEqual(true);
-      });
-    }
-  });
-}
diff --git a/nextjs/shared/index.js b/nextjs/shared/index.js
index 00ca14d6535..42fb066a070 100644
--- a/nextjs/shared/index.js
+++ b/nextjs/shared/index.js
@@ -3,12 +3,13 @@ import createMatcher from 'feather-route-matcher';
 
 export async function matchFederatedPage(remotes, path) {
   const maps = await Promise.all(
-    remotes.map(remote =>
-      window[remote]
+    remotes.map(remote => {
+      console.log(window[remote]);
+      return window[remote]
         .get('./pages-map')
         .then(factory => ({ remote, config: factory().default }))
-        .catch(() => null),
-    ),
+        .catch(() => null);
+    }),
   );
 
   const config = {};
@@ -38,11 +39,15 @@ export function createFederatedCatchAll(remotes) {
       ...lazyProps,
       ...initialProps,
     };
-
-    React.useEffect(async () => {
+    console.log(initialProps);
+    React.useEffect(() => {
+      console.log(needsReload);
       if (needsReload) {
-        const federatedProps = await FederatedCatchAll.getInitialProps(props);
-        setProps(federatedProps);
+        const runUnderlayingGIP = async () => {
+          const federatedProps = await FederatedCatchAll.getInitialProps(props);
+          setProps(federatedProps);
+        };
+        runUnderlayingGIP();
       }
     }, []);
 
@@ -64,16 +69,14 @@ export function createFederatedCatchAll(remotes) {
 
   FederatedCatchAll.getInitialProps = async ctx => {
     const { err, req, res, AppTree, ...props } = ctx;
-
     if (err) {
       // TODO: Run getInitialProps for error page
       return { renderError: true, ...props };
     }
-
     if (!process.browser) {
       return { needsReload: true, ...props };
     }
-
+    console.log('in browser');
     try {
       const matchedPage = await matchFederatedPage(remotes, ctx.asPath);
       console.log('matchedPage', matchedPage);
diff --git a/nextjs/shop/package.json b/nextjs/shop/package.json
index e09c0b24553..290db462909 100644
--- a/nextjs/shop/package.json
+++ b/nextjs/shop/package.json
@@ -9,13 +9,13 @@
   },
   "dependencies": {
     "nextjs-shared": "*",
-    "@module-federation/nextjs-mf": "^3.3.0",
+    "@module-federation/nextjs-mf": "^3.5.0",
     "lodash": "4.17.21",
-    "next": "12.1.0",
+    "next": "12.1.6",
     "next-compose-plugins": "^2.2.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "webpack": "5.70.0",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "webpack": "5.72.1",
     "webpack-merge": "^5.8.0"
   }
 }
diff --git a/nextjs/shop/pages/[...slug].js b/nextjs/shop/pages/[...slug].js
index 909b97340a2..f3a02d69d27 100644
--- a/nextjs/shop/pages/[...slug].js
+++ b/nextjs/shop/pages/[...slug].js
@@ -1,9 +1,9 @@
 import dynamic from 'next/dynamic';
 const page = import('../realPages/[...slug]');
 
-const Page = dynamic(() => page);
+const Page = dynamic(() => import('../realPages/[...slug]'));
 Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
+  const getInitialProps = (await page).default?.getInitialProps;
   if (getInitialProps) {
     return getInitialProps(ctx);
   }
diff --git a/nextjs/shop/pages/_app.js b/nextjs/shop/pages/_app.js
index deaca69c64c..a64ebdbc669 100644
--- a/nextjs/shop/pages/_app.js
+++ b/nextjs/shop/pages/_app.js
@@ -1,12 +1,14 @@
+import App from 'next/app';
 import dynamic from 'next/dynamic';
 const page = import('../realPages/_app');
 
-const Page = dynamic(() => page);
+const Page = dynamic(() => import('../realPages/_app'));
 Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
+  const appProps = await App.getInitialProps(ctx);
+  const getInitialProps = (await page).default?.getInitialProps;
   if (getInitialProps) {
-    return getInitialProps(ctx);
+    return { ...appProps, ...getInitialProps(ctx) };
   }
-  return {};
+  return { ...appProps };
 };
 export default Page;
diff --git a/nextjs/shop/pages/index.js b/nextjs/shop/pages/index.js
index f2f1f40f503..58783f4ee00 100644
--- a/nextjs/shop/pages/index.js
+++ b/nextjs/shop/pages/index.js
@@ -1,9 +1,9 @@
 import dynamic from 'next/dynamic';
 const page = import('../realPages/index');
 
-const Page = dynamic(() => page);
+const Page = dynamic(() => import('../realPages/index'));
 Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
+  const getInitialProps = (await page).default?.getInitialProps;
   if (getInitialProps) {
     return getInitialProps(ctx);
   }
diff --git a/nextjs/shop/pages/p/[...slug].js b/nextjs/shop/pages/p/[...slug].js
index 761b6d217e5..2e370cc205c 100644
--- a/nextjs/shop/pages/p/[...slug].js
+++ b/nextjs/shop/pages/p/[...slug].js
@@ -1,9 +1,9 @@
 import dynamic from 'next/dynamic';
 const page = import('../../realPages/p/[...slug]');
 
-const Page = dynamic(() => page);
+const Page = dynamic(() => import('../../realPages/p/[...slug]'));
 Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
+  const getInitialProps = (await page).default?.getInitialProps;
   if (getInitialProps) {
     return getInitialProps(ctx);
   }
diff --git a/nextjs/shop/pages/shop.js b/nextjs/shop/pages/shop.js
index 7c5f73bef4d..085e02291e4 100644
--- a/nextjs/shop/pages/shop.js
+++ b/nextjs/shop/pages/shop.js
@@ -1,9 +1,9 @@
 import dynamic from 'next/dynamic';
 const page = import('../realPages/shop');
 
-const Page = dynamic(() => page);
+const Page = dynamic(() => import('../realPages/shop'));
 Page.getInitialProps = async ctx => {
-  const getInitialProps = await page.default?.getInitialProps;
+  const getInitialProps = (await page).default?.getInitialProps;
   if (getInitialProps) {
     return getInitialProps(ctx);
   }
diff --git a/nextjs/yarn.lock b/nextjs/yarn.lock
index e88e979fca9..22f1a90c508 100644
--- a/nextjs/yarn.lock
+++ b/nextjs/yarn.lock
@@ -2,72 +2,77 @@
 # yarn lockfile v1
 
 
-"@module-federation/nextjs-mf@^3.3.0":
-  version "3.3.0"
-  resolved "http://r.privjs.com/@module-federation%2fnextjs-mf/-/nextjs-mf-3.3.0.tgz#b9a4e2dc3a27419efa35bbdf5a7e32dc2f95749e"
-  integrity sha512-R6HpypjX0ollrFt+TDbzbrN7b4vpxqKziLxFYFfWkBP9MtuMe1vnrwdUR/FsqAHAqg9aBRYK2UvLilPybgV8og==
+"@module-federation/nextjs-mf@3.5.0", "@module-federation/nextjs-mf@^3.5.0":
+  version "3.5.0"
+  resolved "http://r.privjs.com/@module-federation%2fnextjs-mf/-/nextjs-mf-3.5.0.tgz#dd0a5d9596d043cd420ea9ff6f4eaae7a7e45adf"
+  integrity sha512-JjUPB8DlFxfEAUXXYzInxEHqqscBm8wHpViMtlyZRiOeAZKMl9Rpdu6Tc/5yKNjEfFlkswZdpQvgxsMLSaxuNg==
   dependencies:
     chalk "^4.0.0"
 
-"@next/env@12.1.0":
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.0.tgz#73713399399b34aa5a01771fb73272b55b22c314"
-  integrity sha512-nrIgY6t17FQ9xxwH3jj0a6EOiQ/WDHUos35Hghtr+SWN/ntHIQ7UpuvSi0vaLzZVHQWaDupKI+liO5vANcDeTQ==
-
-"@next/swc-android-arm64@12.1.0":
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.0.tgz#865ba3a9afc204ff2bdeea49dd64d58705007a39"
-  integrity sha512-/280MLdZe0W03stA69iL+v6I+J1ascrQ6FrXBlXGCsGzrfMaGr7fskMa0T5AhQIVQD4nA/46QQWxG//DYuFBcA==
-
-"@next/swc-darwin-arm64@12.1.0":
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.0.tgz#08e8b411b8accd095009ed12efbc2f1d4d547135"
-  integrity sha512-R8vcXE2/iONJ1Unf5Ptqjk6LRW3bggH+8drNkkzH4FLEQkHtELhvcmJwkXcuipyQCsIakldAXhRbZmm3YN1vXg==
-
-"@next/swc-darwin-x64@12.1.0":
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.0.tgz#fcd684497a76e8feaca88db3c394480ff0b007cd"
-  integrity sha512-ieAz0/J0PhmbZBB8+EA/JGdhRHBogF8BWaeqR7hwveb6SYEIJaDNQy0I+ZN8gF8hLj63bEDxJAs/cEhdnTq+ug==
-
-"@next/swc-linux-arm-gnueabihf@12.1.0":
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.0.tgz#9ec6380a27938a5799aaa6035c205b3c478468a7"
-  integrity sha512-njUd9hpl6o6A5d08dC0cKAgXKCzm5fFtgGe6i0eko8IAdtAPbtHxtpre3VeSxdZvuGFh+hb0REySQP9T1ttkog==
-
-"@next/swc-linux-arm64-gnu@12.1.0":
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.0.tgz#7f4196dff1049cea479607c75b81033ae2dbd093"
-  integrity sha512-OqangJLkRxVxMhDtcb7Qn1xjzFA3s50EIxY7mljbSCLybU+sByPaWAHY4px97ieOlr2y4S0xdPKkQ3BCAwyo6Q==
-
-"@next/swc-linux-arm64-musl@12.1.0":
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.0.tgz#b445f767569cdc2dddee785ca495e1a88c025566"
-  integrity sha512-hB8cLSt4GdmOpcwRe2UzI5UWn6HHO/vLkr5OTuNvCJ5xGDwpPXelVkYW/0+C3g5axbDW2Tym4S+MQCkkH9QfWA==
-
-"@next/swc-linux-x64-gnu@12.1.0":
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.0.tgz#67610e9be4fbc987de7535f1bcb17e45fe12f90e"
-  integrity sha512-OKO4R/digvrVuweSw/uBM4nSdyzsBV5EwkUeeG4KVpkIZEe64ZwRpnFB65bC6hGwxIBnTv5NMSnJ+0K/WmG78A==
-
-"@next/swc-linux-x64-musl@12.1.0":
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.0.tgz#ea19a23db08a9f2e34ac30401f774cf7d1669d31"
-  integrity sha512-JohhgAHZvOD3rQY7tlp7NlmvtvYHBYgY0x5ZCecUT6eCCcl9lv6iV3nfu82ErkxNk1H893fqH0FUpznZ/H3pSw==
-
-"@next/swc-win32-arm64-msvc@12.1.0":
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.0.tgz#eadf054fc412085659b98e145435bbba200b5283"
-  integrity sha512-T/3gIE6QEfKIJ4dmJk75v9hhNiYZhQYAoYm4iVo1TgcsuaKLFa+zMPh4056AHiG6n9tn2UQ1CFE8EoybEsqsSw==
-
-"@next/swc-win32-ia32-msvc@12.1.0":
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.0.tgz#68faeae10c89f698bf9d28759172b74c9c21bda1"
-  integrity sha512-iwnKgHJdqhIW19H9PRPM9j55V6RdcOo6rX+5imx832BCWzkDbyomWnlzBfr6ByUYfhohb8QuH4hSGEikpPqI0Q==
-
-"@next/swc-win32-x64-msvc@12.1.0":
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.0.tgz#d27e7e76c87a460a4da99c5bfdb1618dcd6cd064"
-  integrity sha512-aBvcbMwuanDH4EMrL2TthNJy+4nP59Bimn8egqv6GHMVj0a44cU6Au4PjOhLNqEh9l+IpRGBqMTzec94UdC5xg==
+"@next/env@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.6.tgz#5f44823a78335355f00f1687cfc4f1dafa3eca08"
+  integrity sha512-Te/OBDXFSodPU6jlXYPAXpmZr/AkG6DCATAxttQxqOWaq6eDFX25Db3dK0120GZrSZmv4QCe9KsZmJKDbWs4OA==
+
+"@next/swc-android-arm-eabi@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.6.tgz#79a35349b98f2f8c038ab6261aa9cd0d121c03f9"
+  integrity sha512-BxBr3QAAAXWgk/K7EedvzxJr2dE014mghBSA9iOEAv0bMgF+MRq4PoASjuHi15M2zfowpcRG8XQhMFtxftCleQ==
+
+"@next/swc-android-arm64@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.6.tgz#ec08ea61794f8752c8ebcacbed0aafc5b9407456"
+  integrity sha512-EboEk3ROYY7U6WA2RrMt/cXXMokUTXXfnxe2+CU+DOahvbrO8QSWhlBl9I9ZbFzJx28AGB9Yo3oQHCvph/4Lew==
+
+"@next/swc-darwin-arm64@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.6.tgz#d1053805615fd0706e9b1667893a72271cd87119"
+  integrity sha512-P0EXU12BMSdNj1F7vdkP/VrYDuCNwBExtRPDYawgSUakzi6qP0iKJpya2BuLvNzXx+XPU49GFuDC5X+SvY0mOw==
+
+"@next/swc-darwin-x64@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.6.tgz#2d1b926a22f4c5230d5b311f9c56cfdcc406afec"
+  integrity sha512-9FptMnbgHJK3dRDzfTpexs9S2hGpzOQxSQbe8omz6Pcl7rnEp9x4uSEKY51ho85JCjL4d0tDLBcXEJZKKLzxNg==
+
+"@next/swc-linux-arm-gnueabihf@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.6.tgz#c021918d2a94a17f823106a5e069335b8a19724f"
+  integrity sha512-PvfEa1RR55dsik/IDkCKSFkk6ODNGJqPY3ysVUZqmnWMDSuqFtf7BPWHFa/53znpvVB5XaJ5Z1/6aR5CTIqxPw==
+
+"@next/swc-linux-arm64-gnu@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.6.tgz#ac55c07bfabde378dfa0ce2b8fc1c3b2897e81ae"
+  integrity sha512-53QOvX1jBbC2ctnmWHyRhMajGq7QZfl974WYlwclXarVV418X7ed7o/EzGY+YVAEKzIVaAB9JFFWGXn8WWo0gQ==
+
+"@next/swc-linux-arm64-musl@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.6.tgz#e429f826279894be9096be6bec13e75e3d6bd671"
+  integrity sha512-CMWAkYqfGdQCS+uuMA1A2UhOfcUYeoqnTW7msLr2RyYAys15pD960hlDfq7QAi8BCAKk0sQ2rjsl0iqMyziohQ==
+
+"@next/swc-linux-x64-gnu@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.6.tgz#1f276c0784a5ca599bfa34b2fcc0b38f3a738e08"
+  integrity sha512-AC7jE4Fxpn0s3ujngClIDTiEM/CQiB2N2vkcyWWn6734AmGT03Duq6RYtPMymFobDdAtZGFZd5nR95WjPzbZAQ==
+
+"@next/swc-linux-x64-musl@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.6.tgz#1d9933dd6ba303dcfd8a2acd6ac7c27ed41e2eea"
+  integrity sha512-c9Vjmi0EVk0Kou2qbrynskVarnFwfYIi+wKufR9Ad7/IKKuP6aEhOdZiIIdKsYWRtK2IWRF3h3YmdnEa2WLUag==
+
+"@next/swc-win32-arm64-msvc@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.6.tgz#2ef9837f12ca652b1783d72ecb86208906042f02"
+  integrity sha512-3UTOL/5XZSKFelM7qN0it35o3Cegm6LsyuERR3/OoqEExyj3aCk7F025b54/707HTMAnjlvQK3DzLhPu/xxO4g==
+
+"@next/swc-win32-ia32-msvc@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.6.tgz#74003d0aa1c59dfa56cb15481a5c607cbc0027b9"
+  integrity sha512-8ZWoj6nCq6fI1yCzKq6oK0jE6Mxlz4MrEsRyu0TwDztWQWe7rh4XXGLAa2YVPatYcHhMcUL+fQQbqd1MsgaSDA==
+
+"@next/swc-win32-x64-msvc@12.1.6":
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.6.tgz#a350caf42975e7197b24b495b8d764eec7e6a36e"
+  integrity sha512-4ZEwiRuZEicXhXqmhw3+de8Z4EpOLQj/gp+D9fFWo6ii6W1kBkNNvvEx4A90ugppu+74pT1lIJnOuz3A9oQeJA==
 
 "@types/eslint-scope@^3.7.3":
   version "3.7.3"
@@ -289,11 +294,16 @@ buffer-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
-caniuse-lite@^1.0.30001283, caniuse-lite@^1.0.30001286:
+caniuse-lite@^1.0.30001286:
   version "1.0.30001299"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz#d753bf6444ed401eb503cbbe17aa3e1451b5a68c"
   integrity sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==
 
+caniuse-lite@^1.0.30001332:
+  version "1.0.30001342"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001342.tgz#87152b1e3b950d1fbf0093e23f00b6c8e8f1da96"
+  integrity sha512-bn6sOCu7L7jcbBbyNhLg0qzXdJ/PMbybZTH/BA6Roet9wxYRm6Tr9D0s0uhLkOZ6MSG+QU6txUgdpr3MXIVqjA==
+
 chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -379,6 +389,14 @@ enhanced-resolve@^5.9.2:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enhanced-resolve@^5.9.3:
+  version "5.9.3"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz#44a342c012cbc473254af5cc6ae20ebd0aae5d88"
+  integrity sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 es-module-lexer@^0.9.0:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
@@ -490,6 +508,11 @@ json-parse-better-errors@^1.0.2:
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
+json-parse-even-better-errors@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -549,39 +572,34 @@ next-compose-plugins@^2.2.1:
   resolved "https://registry.yarnpkg.com/next-compose-plugins/-/next-compose-plugins-2.2.1.tgz#020fc53f275a7e719d62521bef4300fbb6fde5ab"
   integrity sha512-OjJ+fV15FXO2uQXQagLD4C0abYErBjyjE0I0FHpOEIB8upw0hg1ldFP6cqHTJBH1cZqy96OeR3u1dJ+Ez2D4Bg==
 
-next@12.1.0:
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/next/-/next-12.1.0.tgz#c33d753b644be92fc58e06e5a214f143da61dd5d"
-  integrity sha512-s885kWvnIlxsUFHq9UGyIyLiuD0G3BUC/xrH0CEnH5lHEWkwQcHOORgbDF0hbrW9vr/7am4ETfX4A7M6DjrE7Q==
+next@12.1.6:
+  version "12.1.6"
+  resolved "https://registry.yarnpkg.com/next/-/next-12.1.6.tgz#eb205e64af1998651f96f9df44556d47d8bbc533"
+  integrity sha512-cebwKxL3/DhNKfg9tPZDQmbRKjueqykHHbgaoG4VBRH3AHQJ2HO0dbKFiS1hPhe1/qgc2d/hFeadsbPicmLD+A==
   dependencies:
-    "@next/env" "12.1.0"
-    caniuse-lite "^1.0.30001283"
+    "@next/env" "12.1.6"
+    caniuse-lite "^1.0.30001332"
     postcss "8.4.5"
-    styled-jsx "5.0.0"
-    use-subscription "1.5.1"
+    styled-jsx "5.0.2"
   optionalDependencies:
-    "@next/swc-android-arm64" "12.1.0"
-    "@next/swc-darwin-arm64" "12.1.0"
-    "@next/swc-darwin-x64" "12.1.0"
-    "@next/swc-linux-arm-gnueabihf" "12.1.0"
-    "@next/swc-linux-arm64-gnu" "12.1.0"
-    "@next/swc-linux-arm64-musl" "12.1.0"
-    "@next/swc-linux-x64-gnu" "12.1.0"
-    "@next/swc-linux-x64-musl" "12.1.0"
-    "@next/swc-win32-arm64-msvc" "12.1.0"
-    "@next/swc-win32-ia32-msvc" "12.1.0"
-    "@next/swc-win32-x64-msvc" "12.1.0"
+    "@next/swc-android-arm-eabi" "12.1.6"
+    "@next/swc-android-arm64" "12.1.6"
+    "@next/swc-darwin-arm64" "12.1.6"
+    "@next/swc-darwin-x64" "12.1.6"
+    "@next/swc-linux-arm-gnueabihf" "12.1.6"
+    "@next/swc-linux-arm64-gnu" "12.1.6"
+    "@next/swc-linux-arm64-musl" "12.1.6"
+    "@next/swc-linux-x64-gnu" "12.1.6"
+    "@next/swc-linux-x64-musl" "12.1.6"
+    "@next/swc-win32-arm64-msvc" "12.1.6"
+    "@next/swc-win32-ia32-msvc" "12.1.6"
+    "@next/swc-win32-x64-msvc" "12.1.6"
 
 node-releases@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5"
   integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
 
-object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -608,22 +626,20 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-react-dom@17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
+  integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.22.0"
 
-react@17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
+  integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 require-directory@^2.1.1:
   version "2.1.1"
@@ -642,13 +658,12 @@ safe-buffer@^5.1.0:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.22.0:
+  version "0.22.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
+  integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^3.1.0, schema-utils@^3.1.1:
   version "3.1.1"
@@ -717,10 +732,10 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
-styled-jsx@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0.tgz#816b4b92e07b1786c6b7111821750e0ba4d26e77"
-  integrity sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA==
+styled-jsx@5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.2.tgz#ff230fd593b737e9e68b630a694d460425478729"
+  integrity sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==
 
 supports-color@^7.1.0:
   version "7.2.0"
@@ -778,13 +793,6 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-use-subscription@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"
-  integrity sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==
-  dependencies:
-    object-assign "^4.1.1"
-
 watchpack@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.3.1.tgz#4200d9447b401156eeca7767ee610f8809bc9d25"
@@ -806,10 +814,10 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@5.70.0:
-  version "5.70.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.70.0.tgz#3461e6287a72b5e6e2f4872700bc8de0d7500e6d"
-  integrity sha512-ZMWWy8CeuTTjCxbeaQI21xSswseF2oNOwc70QSKNePvmxE7XW36i7vpBMYZFAUHPwQiEbNGCEYIOOlyRbdGmxw==
+webpack@5.72.0:
+  version "5.72.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.72.0.tgz#f8bc40d9c6bb489a4b7a8a685101d6022b8b6e28"
+  integrity sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^0.0.51"
@@ -836,6 +844,36 @@ webpack@5.70.0:
     watchpack "^2.3.1"
     webpack-sources "^3.2.3"
 
+webpack@5.72.1:
+  version "5.72.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.72.1.tgz#3500fc834b4e9ba573b9f430b2c0a61e1bb57d13"
+  integrity sha512-dXG5zXCLspQR4krZVR6QgajnZOjW2K/djHvdcRaDQvsjV9z9vaW6+ja5dZOYbqBBjF6kGXka/2ZyxNdc+8Jung==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^0.0.51"
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/wasm-edit" "1.11.1"
+    "@webassemblyjs/wasm-parser" "1.11.1"
+    acorn "^8.4.1"
+    acorn-import-assertions "^1.7.6"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.9.3"
+    es-module-lexer "^0.9.0"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.9"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.1.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.1.3"
+    watchpack "^2.3.1"
+    webpack-sources "^3.2.3"
+
 wildcard@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
diff --git a/react-nextjs/README.md b/react-nextjs/README.md
index 1cacf18e4f9..47e99ce0eae 100644
--- a/react-nextjs/README.md
+++ b/react-nextjs/README.md
@@ -4,47 +4,52 @@
 
 This repo has some examples of module federation that may exist, and it's a WIP, so we will add examples along the way, for instance, react host with react remote and more.
 
-* Disclaimer for NextJS apps you need the lates version of `@module-federation/nextjs-mf` that is a paid module, you can red more [here](https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-mf)
-
+- Disclaimer for NextJS apps you need the lates version of `@module-federation/nextjs-mf` that is a paid module, you can red more [here](https://app.privjs.com/buy/packageDetail?pkg=@module-federation/nextjs-mf)
 
 #### ⬇️ Host
-- It is a top-level app that depends on modules exposed from a remote app 
+
+- It is a top-level app that depends on modules exposed from a remote app
 - Runs on port `8080`
 
 #### ⬆️ Remote
+
 - Exposes components: for example `Nav` to another app called host.
 - Runs on port `8081`
 
 #### 🔄 BI-Directional
-It is a middle-level app, which depends on modules exposed from remote app, for example can be : react ,react-dom or others. In the meantime, it also exposes components: for example `Nav` to another host apps 
+
+It is a middle-level app, which depends on modules exposed from remote app, for example can be : react ,react-dom or others. In the meantime, it also exposes components: for example `Nav` to another host apps
 
 ### 🛠️ Set Up and running module federation types
+
 - Clone the project
 - Navigate to the type of module federation you are interested to run
-  - For example we will illustrate for: `nextjs-host-remote` 
+  - For example we will illustrate for: `nextjs-host-remote`
   - Navigate to `nextjs-host-remote` folder
   - Run in the root folder: `yarn`
   - Run: `yarn start`
   - Navigate to: [http://localhost:8080/](http://localhost:8080/)
 
-
-
 ## 🖇️ Types
-- To run every type, please take a look: *Set Up and running module federation types* 
+
+- To run every type, please take a look: _Set Up and running module federation types_
 
 ### 💠 NextJS Host and NextJS Remote
--  Module federation that has a host app with NextJS and a remote app with NextJS
-- This type of module federated at folder: `nextjs-host-remote`
 
+- Module federation that has a host app with NextJS and a remote app with NextJS
+- This type of module federated at folder: `nextjs-host-remote`
 
 ### 💠 React Host and React Remote
--  Module federation that has a host app with React and a remote app with React
+
+- Module federation that has a host app with React and a remote app with React
 - This type of module federated at folder: `react-host-remote`
 
 ### 💠 React Host and NextJS Remote
--  Module federation that has a host app with React and a remote app with NextJS
+
+- Module federation that has a host app with React and a remote app with NextJS
 - This type of module federated at folder: `react-host-nextjs-remote`
 
 ### 💠 NextJS Host and React Remote
--  Module federation that has a host app with NextJS and a remote app with React
-- This type of module federated at folder: `nextjs-host-react-remote`
\ No newline at end of file
+
+- Module federation that has a host app with NextJS and a remote app with React
+- This type of module federated at folder: `nextjs-host-react-remote`
diff --git a/react-nextjs/nextjs-host-react-remote/host/next.config.js b/react-nextjs/nextjs-host-react-remote/host/next.config.js
index b27449a10b0..10cb722b09f 100644
--- a/react-nextjs/nextjs-host-react-remote/host/next.config.js
+++ b/react-nextjs/nextjs-host-react-remote/host/next.config.js
@@ -1,33 +1,32 @@
-module.exports =
-  ({
-    webpack5: true,
-    webpack(config, options) {
-      const { webpack, isServer } = options;
-      config.experiments = { topLevelAwait: true };
+module.exports = {
+  webpack5: true,
+  webpack(config, options) {
+    const { webpack, isServer } = options;
+    config.experiments = { topLevelAwait: true };
 
-      config.module.rules.push({
-        test: /_app.js/,
-        loader: '@module-federation/nextjs-mf/lib/federation-loader.js',
-      });
+    config.module.rules.push({
+      test: /_app.js/,
+      loader: '@module-federation/nextjs-mf/lib/federation-loader.js',
+    });
 
-      config.plugins.push(
-        new webpack.container.ModuleFederationPlugin({
-          remotes: {
-            remote: 'remote@http://localhost:8081/remoteEntry.js',
+    config.plugins.push(
+      new webpack.container.ModuleFederationPlugin({
+        remotes: {
+          remote: 'remote@http://localhost:8081/remoteEntry.js',
+        },
+        shared: {
+          react: {
+            singleton: true,
+            eager: true,
+            requiredVersion: false,
           },
-          shared: {
-            react: {
-              singleton: true,
-              eager: true,
-              requiredVersion: false,
-            },
-          },
-          // we have to share something to ensure share scope is initialized
-          // "@module-federation/nextjs-mf/lib/noop": {
-          //   eager: false,
-          // },
-        }),
-      );
-      return config;
-    }
-  });
\ No newline at end of file
+        },
+        // we have to share something to ensure share scope is initialized
+        // "@module-federation/nextjs-mf/lib/noop": {
+        //   eager: false,
+        // },
+      }),
+    );
+    return config;
+  },
+};
diff --git a/react-nextjs/nextjs-host-react-remote/host/pages/_app.js b/react-nextjs/nextjs-host-react-remote/host/pages/_app.js
index 1e1cec92425..244e40bb5b0 100644
--- a/react-nextjs/nextjs-host-react-remote/host/pages/_app.js
+++ b/react-nextjs/nextjs-host-react-remote/host/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/react-nextjs/nextjs-host-react-remote/host/pages/_document.js b/react-nextjs/nextjs-host-react-remote/host/pages/_document.js
index b22b11ff5d5..643afb0af7d 100644
--- a/react-nextjs/nextjs-host-react-remote/host/pages/_document.js
+++ b/react-nextjs/nextjs-host-react-remote/host/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
@@ -12,7 +12,8 @@ class MyDocument extends Document {
         <Head />
         <body>
           <Main />
-          Scipt is only needed if you are not using the federation @ syntax when setting your remotes. 
+          Scipt is only needed if you are not using the federation @ syntax when setting your
+          remotes.
           <script src="http://localhost:8081/_next/static/chunks/remoteEntry.js" />
           <NextScript />
         </body>
@@ -21,4 +22,4 @@ class MyDocument extends Document {
   }
 }
 
-export default MyDocument;
\ No newline at end of file
+export default MyDocument;
diff --git a/react-nextjs/nextjs-host-react-remote/host/pages/api/hello.js b/react-nextjs/nextjs-host-react-remote/host/pages/api/hello.js
index df63de88fa6..d49a2572c6a 100644
--- a/react-nextjs/nextjs-host-react-remote/host/pages/api/hello.js
+++ b/react-nextjs/nextjs-host-react-remote/host/pages/api/hello.js
@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' });
 }
diff --git a/react-nextjs/nextjs-host-react-remote/host/pages/index.js b/react-nextjs/nextjs-host-react-remote/host/pages/index.js
index 37d485db614..94c2dc24567 100644
--- a/react-nextjs/nextjs-host-react-remote/host/pages/index.js
+++ b/react-nextjs/nextjs-host-react-remote/host/pages/index.js
@@ -1,9 +1,9 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
-import dynamic from "next/dynamic";
+import Head from 'next/head';
+import Image from 'next/image';
+import styles from '../styles/Home.module.css';
+import dynamic from 'next/dynamic';
 
-const ReactRemoteComponent = dynamic(() => import("remote/Nav"), {
+const ReactRemoteComponent = dynamic(() => import('remote/Nav'), {
   ssr: false,
 });
 
@@ -22,11 +22,10 @@ export default function Home() {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
+          Get started by editing <code className={styles.code}>pages/index.js</code>
         </p>
 
-        <ReactRemoteComponent />  
+        <ReactRemoteComponent />
         <div className={styles.grid}>
           <a href="https://nextjs.org/docs" className={styles.card}>
             <h2>Documentation &rarr;</h2>
@@ -38,10 +37,7 @@ export default function Home() {
             <p>Learn about Next.js in an interactive course with quizzes!</p>
           </a>
 
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
+          <a href="https://github.com/vercel/next.js/tree/canary/examples" className={styles.card}>
             <h2>Examples &rarr;</h2>
             <p>Discover and deploy boilerplate example Next.js projects.</p>
           </a>
@@ -51,9 +47,7 @@ export default function Home() {
             className={styles.card}
           >
             <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
+            <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
           </a>
         </div>
       </main>
@@ -71,5 +65,5 @@ export default function Home() {
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/react-nextjs/nextjs-host-react-remote/remote/src/App.jsx b/react-nextjs/nextjs-host-react-remote/remote/src/App.jsx
index 6594eb801ae..08134160558 100644
--- a/react-nextjs/nextjs-host-react-remote/remote/src/App.jsx
+++ b/react-nextjs/nextjs-host-react-remote/remote/src/App.jsx
@@ -3,11 +3,8 @@ import React from 'react';
 function App() {
   return (
     <>
-      <div>
-        This is the Remote App
-      </div>
+      <div>This is the Remote App</div>
     </>
-      
   );
 }
 
diff --git a/react-nextjs/nextjs-host-react-remote/remote/src/bootstrap.jsx b/react-nextjs/nextjs-host-react-remote/remote/src/bootstrap.jsx
index 67f60c6af07..8f395e4426a 100644
--- a/react-nextjs/nextjs-host-react-remote/remote/src/bootstrap.jsx
+++ b/react-nextjs/nextjs-host-react-remote/remote/src/bootstrap.jsx
@@ -3,4 +3,4 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 const container = document.getElementById('root');
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
-root.render(<App />);
\ No newline at end of file
+root.render(<App />);
diff --git a/react-nextjs/nextjs-host-react-remote/remote/src/components/Nav.jsx b/react-nextjs/nextjs-host-react-remote/remote/src/components/Nav.jsx
index d3c75e9dc8c..ed972649670 100644
--- a/react-nextjs/nextjs-host-react-remote/remote/src/components/Nav.jsx
+++ b/react-nextjs/nextjs-host-react-remote/remote/src/components/Nav.jsx
@@ -13,7 +13,8 @@ const Nav = () => {
         justifyContent: 'center',
         alignItems: 'center',
         fontSize: '24px',
-      }}>
+      }}
+    >
       This component is from the Host React App hosted at localhost:8081
     </nav>
   );
diff --git a/react-nextjs/nextjs-host-react-remote/remote/webpack.config.js b/react-nextjs/nextjs-host-react-remote/remote/webpack.config.js
index 3c2e91b7478..c520593ca38 100644
--- a/react-nextjs/nextjs-host-react-remote/remote/webpack.config.js
+++ b/react-nextjs/nextjs-host-react-remote/remote/webpack.config.js
@@ -6,7 +6,7 @@ module.exports = {
   entry: {
     app: {
       import: './src/index',
-    }
+    },
   },
   cache: false,
 
@@ -54,8 +54,7 @@ module.exports = {
         // './react-dom': 'react-dom',
         './Nav': './src/components/Nav',
       },
-      shared: {
-      },
+      shared: {},
     }),
     new HtmlWebpackPlugin({
       template: './public/index.html',
diff --git a/react-nextjs/nextjs-host-remote/host/next.config.js b/react-nextjs/nextjs-host-remote/host/next.config.js
index 2faf529f887..3f7af5f2644 100644
--- a/react-nextjs/nextjs-host-remote/host/next.config.js
+++ b/react-nextjs/nextjs-host-remote/host/next.config.js
@@ -1,33 +1,32 @@
-module.exports =
-  ({
-    webpack5: true,
-    webpack(config, options) {
-      const { webpack, isServer } = options;
-      config.experiments = { topLevelAwait: true };
+module.exports = {
+  webpack5: true,
+  webpack(config, options) {
+    const { webpack, isServer } = options;
+    config.experiments = { topLevelAwait: true };
 
-      config.module.rules.push({
-        test: /_app.js/,
-        loader: '@module-federation/nextjs-mf/lib/federation-loader.js',
-      });
+    config.module.rules.push({
+      test: /_app.js/,
+      loader: '@module-federation/nextjs-mf/lib/federation-loader.js',
+    });
 
-      config.plugins.push(
-        new webpack.container.ModuleFederationPlugin({
-          remotes: {
-            remote: 'remote@http://localhost:8081/_next/static/chunks/remoteEntry.js'
+    config.plugins.push(
+      new webpack.container.ModuleFederationPlugin({
+        remotes: {
+          remote: 'remote@http://localhost:8081/_next/static/chunks/remoteEntry.js',
+        },
+        shared: {
+          react: {
+            singleton: true,
+            eager: true,
+            requiredVersion: false,
           },
-          shared: {
-            react: {
-              singleton: true,
-              eager: true,
-              requiredVersion: false,
-            },
-          },
-          // we have to share something to ensure share scope is initialized
-          // "@module-federation/nextjs-mf/lib/noop": {
-          //   eager: false,
-          // },
-        }),
-      );
-      return config;
-    }
-  });
\ No newline at end of file
+        },
+        // we have to share something to ensure share scope is initialized
+        // "@module-federation/nextjs-mf/lib/noop": {
+        //   eager: false,
+        // },
+      }),
+    );
+    return config;
+  },
+};
diff --git a/react-nextjs/nextjs-host-remote/host/pages/_app.js b/react-nextjs/nextjs-host-remote/host/pages/_app.js
index 1e1cec92425..244e40bb5b0 100644
--- a/react-nextjs/nextjs-host-remote/host/pages/_app.js
+++ b/react-nextjs/nextjs-host-remote/host/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/react-nextjs/nextjs-host-remote/host/pages/_document.js b/react-nextjs/nextjs-host-remote/host/pages/_document.js
index b22b11ff5d5..643afb0af7d 100644
--- a/react-nextjs/nextjs-host-remote/host/pages/_document.js
+++ b/react-nextjs/nextjs-host-remote/host/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
@@ -12,7 +12,8 @@ class MyDocument extends Document {
         <Head />
         <body>
           <Main />
-          Scipt is only needed if you are not using the federation @ syntax when setting your remotes. 
+          Scipt is only needed if you are not using the federation @ syntax when setting your
+          remotes.
           <script src="http://localhost:8081/_next/static/chunks/remoteEntry.js" />
           <NextScript />
         </body>
@@ -21,4 +22,4 @@ class MyDocument extends Document {
   }
 }
 
-export default MyDocument;
\ No newline at end of file
+export default MyDocument;
diff --git a/react-nextjs/nextjs-host-remote/host/pages/api/hello.js b/react-nextjs/nextjs-host-remote/host/pages/api/hello.js
index df63de88fa6..d49a2572c6a 100644
--- a/react-nextjs/nextjs-host-remote/host/pages/api/hello.js
+++ b/react-nextjs/nextjs-host-remote/host/pages/api/hello.js
@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' });
 }
diff --git a/react-nextjs/nextjs-host-remote/host/pages/index.js b/react-nextjs/nextjs-host-remote/host/pages/index.js
index 491b88d84ac..9e9ac1df7e7 100644
--- a/react-nextjs/nextjs-host-remote/host/pages/index.js
+++ b/react-nextjs/nextjs-host-remote/host/pages/index.js
@@ -1,13 +1,12 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
-import dynamic from "next/dynamic";
+import Head from 'next/head';
+import Image from 'next/image';
+import styles from '../styles/Home.module.css';
+import dynamic from 'next/dynamic';
 
-const NextjsRemoteComponent = dynamic(() => import("remote/nextjs-remote-component"), {
+const NextjsRemoteComponent = dynamic(() => import('remote/nextjs-remote-component'), {
   ssr: false,
 });
 
-
 export default function Home() {
   return (
     <div className={styles.container}>
@@ -23,8 +22,7 @@ export default function Home() {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
+          Get started by editing <code className={styles.code}>pages/index.js</code>
         </p>
 
         <NextjsRemoteComponent />
@@ -40,10 +38,7 @@ export default function Home() {
             <p>Learn about Next.js in an interactive course with quizzes!</p>
           </a>
 
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
+          <a href="https://github.com/vercel/next.js/tree/canary/examples" className={styles.card}>
             <h2>Examples &rarr;</h2>
             <p>Discover and deploy boilerplate example Next.js projects.</p>
           </a>
@@ -53,9 +48,7 @@ export default function Home() {
             className={styles.card}
           >
             <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
+            <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
           </a>
         </div>
       </main>
@@ -73,5 +66,5 @@ export default function Home() {
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/react-nextjs/nextjs-host-remote/package.json b/react-nextjs/nextjs-host-remote/package.json
index 965f8b0e6b0..751de64d850 100644
--- a/react-nextjs/nextjs-host-remote/package.json
+++ b/react-nextjs/nextjs-host-remote/package.json
@@ -8,8 +8,9 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "private": true,
-  "workspaces": [ 
-    "host", "remote"
+  "workspaces": [
+    "host",
+    "remote"
   ],
   "author": "Omher",
   "license": "ISC",
diff --git a/react-nextjs/nextjs-host-remote/remote/components/nextjs-remote-component.js b/react-nextjs/nextjs-host-remote/remote/components/nextjs-remote-component.js
index 30a9e22d7fe..99b128336b0 100644
--- a/react-nextjs/nextjs-host-remote/remote/components/nextjs-remote-component.js
+++ b/react-nextjs/nextjs-host-remote/remote/components/nextjs-remote-component.js
@@ -13,7 +13,8 @@ const NextjsRemoteComponent = () => {
         justifyContent: 'center',
         alignItems: 'center',
         fontSize: '24px',
-      }}>
+      }}
+    >
       Hello from Remote Nextjs component
     </nav>
   );
diff --git a/react-nextjs/nextjs-host-remote/remote/next.config.js b/react-nextjs/nextjs-host-remote/remote/next.config.js
index e12358b23fa..4d208555ffa 100644
--- a/react-nextjs/nextjs-host-remote/remote/next.config.js
+++ b/react-nextjs/nextjs-host-remote/remote/next.config.js
@@ -1,10 +1,10 @@
-const { withFederatedSidecar } = require("@module-federation/nextjs-mf");
+const { withFederatedSidecar } = require('@module-federation/nextjs-mf');
 
 module.exports = withFederatedSidecar({
-  name: "remote",
-  filename: "static/chunks/remoteEntry.js",
+  name: 'remote',
+  filename: 'static/chunks/remoteEntry.js',
   exposes: {
-    "./nextjs-remote-component": "./components/nextjs-remote-component.js",
+    './nextjs-remote-component': './components/nextjs-remote-component.js',
   },
   shared: {
     react: {
@@ -16,4 +16,4 @@ module.exports = withFederatedSidecar({
 })({
   // your original next.config.js export
   reactStrictMode: true,
-});
\ No newline at end of file
+});
diff --git a/react-nextjs/nextjs-host-remote/remote/pages/_app.js b/react-nextjs/nextjs-host-remote/remote/pages/_app.js
index 1e1cec92425..244e40bb5b0 100644
--- a/react-nextjs/nextjs-host-remote/remote/pages/_app.js
+++ b/react-nextjs/nextjs-host-remote/remote/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/react-nextjs/nextjs-host-remote/remote/pages/api/hello.js b/react-nextjs/nextjs-host-remote/remote/pages/api/hello.js
index df63de88fa6..d49a2572c6a 100644
--- a/react-nextjs/nextjs-host-remote/remote/pages/api/hello.js
+++ b/react-nextjs/nextjs-host-remote/remote/pages/api/hello.js
@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' });
 }
diff --git a/react-nextjs/nextjs-host-remote/remote/pages/index.js b/react-nextjs/nextjs-host-remote/remote/pages/index.js
index bca04e71eee..71b884e558c 100644
--- a/react-nextjs/nextjs-host-remote/remote/pages/index.js
+++ b/react-nextjs/nextjs-host-remote/remote/pages/index.js
@@ -1,7 +1,7 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
-import NextjsRemoteComponent from './../components/nextjs-remote-component'
+import Head from 'next/head';
+import Image from 'next/image';
+import styles from '../styles/Home.module.css';
+import NextjsRemoteComponent from './../components/nextjs-remote-component';
 
 export default function Home() {
   return (
@@ -18,10 +18,9 @@ export default function Home() {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
+          Get started by editing <code className={styles.code}>pages/index.js</code>
         </p>
-        
+
         {/* <NextjsRemoteComponent /> */}
 
         <div className={styles.grid}>
@@ -35,10 +34,7 @@ export default function Home() {
             <p>Learn about Next.js in an interactive course with quizzes!</p>
           </a>
 
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
+          <a href="https://github.com/vercel/next.js/tree/canary/examples" className={styles.card}>
             <h2>Examples &rarr;</h2>
             <p>Discover and deploy boilerplate example Next.js projects.</p>
           </a>
@@ -48,9 +44,7 @@ export default function Home() {
             className={styles.card}
           >
             <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
+            <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
           </a>
         </div>
       </main>
@@ -68,5 +62,5 @@ export default function Home() {
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/react-nextjs/react-host-nextjs-remote/host/src/App.jsx b/react-nextjs/react-host-nextjs-remote/host/src/App.jsx
index e7d99bc6bb7..05d5e3de001 100644
--- a/react-nextjs/react-host-nextjs-remote/host/src/App.jsx
+++ b/react-nextjs/react-host-nextjs-remote/host/src/App.jsx
@@ -1,17 +1,14 @@
 import React from 'react';
-import NextjsRemoteComponent from 'remote/nextjs-remote-component'
-import NextjsRemotePage from 'remote/nextjs-remote-page'
+import NextjsRemoteComponent from 'remote/nextjs-remote-component';
+import NextjsRemotePage from 'remote/nextjs-remote-page';
 
 function App() {
   return (
     <>
-      <div>
-        This is the React container App hosted at localhost:8080
-      </div>
+      <div>This is the React container App hosted at localhost:8080</div>
       <NextjsRemoteComponent />
       <NextjsRemotePage />
     </>
-      
   );
 }
 
diff --git a/react-nextjs/react-host-nextjs-remote/host/src/bootstrap.jsx b/react-nextjs/react-host-nextjs-remote/host/src/bootstrap.jsx
index 67f60c6af07..8f395e4426a 100644
--- a/react-nextjs/react-host-nextjs-remote/host/src/bootstrap.jsx
+++ b/react-nextjs/react-host-nextjs-remote/host/src/bootstrap.jsx
@@ -3,4 +3,4 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 const container = document.getElementById('root');
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
-root.render(<App />);
\ No newline at end of file
+root.render(<App />);
diff --git a/react-nextjs/react-host-nextjs-remote/host/src/components/Nav.jsx b/react-nextjs/react-host-nextjs-remote/host/src/components/Nav.jsx
index d3c75e9dc8c..ed972649670 100644
--- a/react-nextjs/react-host-nextjs-remote/host/src/components/Nav.jsx
+++ b/react-nextjs/react-host-nextjs-remote/host/src/components/Nav.jsx
@@ -13,7 +13,8 @@ const Nav = () => {
         justifyContent: 'center',
         alignItems: 'center',
         fontSize: '24px',
-      }}>
+      }}
+    >
       This component is from the Host React App hosted at localhost:8081
     </nav>
   );
diff --git a/react-nextjs/react-host-nextjs-remote/host/webpack.config.js b/react-nextjs/react-host-nextjs-remote/host/webpack.config.js
index 4a1b018bc0a..0927018b27c 100644
--- a/react-nextjs/react-host-nextjs-remote/host/webpack.config.js
+++ b/react-nextjs/react-host-nextjs-remote/host/webpack.config.js
@@ -6,7 +6,7 @@ module.exports = {
   entry: {
     app: {
       import: './src/index',
-    }
+    },
   },
   cache: false,
 
@@ -50,10 +50,9 @@ module.exports = {
       name: 'host',
       filename: 'remoteEntry.js',
       remotes: {
-        remote: 'remote@http://localhost:8081/_next/static/chunks/remoteEntry.js'
-      },
-      exposes: {
+        remote: 'remote@http://localhost:8081/_next/static/chunks/remoteEntry.js',
       },
+      exposes: {},
       shared: {
         react: {
           // Notice shared are NOT eager here.
diff --git a/react-nextjs/react-host-nextjs-remote/remote/components/nextjs-remote-component.js b/react-nextjs/react-host-nextjs-remote/remote/components/nextjs-remote-component.js
index fc271c838fc..dba8ea4aa60 100644
--- a/react-nextjs/react-host-nextjs-remote/remote/components/nextjs-remote-component.js
+++ b/react-nextjs/react-host-nextjs-remote/remote/components/nextjs-remote-component.js
@@ -15,7 +15,8 @@ const NextjsRemoteComponent = () => {
         justifyContent: 'center',
         alignItems: 'center',
         fontSize: '24px',
-      }}>
+      }}
+    >
       Hello from Remote Nextjs component hosted on localhost:8081
     </nav>
   );
diff --git a/react-nextjs/react-host-nextjs-remote/remote/components/nextjs-remote-page.js b/react-nextjs/react-host-nextjs-remote/remote/components/nextjs-remote-page.js
index c83056d68c3..2e39b0219cc 100644
--- a/react-nextjs/react-host-nextjs-remote/remote/components/nextjs-remote-page.js
+++ b/react-nextjs/react-host-nextjs-remote/remote/components/nextjs-remote-page.js
@@ -13,7 +13,8 @@ const NextjsRemoteComponent = () => {
         justifyContent: 'center',
         alignItems: 'center',
         fontSize: '24px',
-      }}>
+      }}
+    >
       Hello from Remote Nextjs component hosted on localhost:8081
     </nav>
   );
diff --git a/react-nextjs/react-host-nextjs-remote/remote/next.config.js b/react-nextjs/react-host-nextjs-remote/remote/next.config.js
index 2e43d7f9c9a..213f92e250f 100644
--- a/react-nextjs/react-host-nextjs-remote/remote/next.config.js
+++ b/react-nextjs/react-host-nextjs-remote/remote/next.config.js
@@ -1,11 +1,11 @@
-const { withFederatedSidecar } = require("@module-federation/nextjs-mf");
+const { withFederatedSidecar } = require('@module-federation/nextjs-mf');
 
 module.exports = withFederatedSidecar({
-  name: "remote",
-  filename: "static/chunks/remoteEntry.js",
+  name: 'remote',
+  filename: 'static/chunks/remoteEntry.js',
   exposes: {
-    "./nextjs-remote-component": "./components/nextjs-remote-component.js",
-    "./nextjs-remote-page": "./pages/index.js",
+    './nextjs-remote-component': './components/nextjs-remote-component.js',
+    './nextjs-remote-page': './pages/index.js',
   },
   shared: {
     // react: {
@@ -17,4 +17,4 @@ module.exports = withFederatedSidecar({
 })({
   // your original next.config.js export
   reactStrictMode: true,
-});
\ No newline at end of file
+});
diff --git a/react-nextjs/react-host-nextjs-remote/remote/pages/_app.js b/react-nextjs/react-host-nextjs-remote/remote/pages/_app.js
index 1e1cec92425..244e40bb5b0 100644
--- a/react-nextjs/react-host-nextjs-remote/remote/pages/_app.js
+++ b/react-nextjs/react-host-nextjs-remote/remote/pages/_app.js
@@ -1,7 +1,7 @@
-import '../styles/globals.css'
+import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;
diff --git a/react-nextjs/react-host-nextjs-remote/remote/pages/api/hello.js b/react-nextjs/react-host-nextjs-remote/remote/pages/api/hello.js
index df63de88fa6..d49a2572c6a 100644
--- a/react-nextjs/react-host-nextjs-remote/remote/pages/api/hello.js
+++ b/react-nextjs/react-host-nextjs-remote/remote/pages/api/hello.js
@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' });
 }
diff --git a/react-nextjs/react-host-nextjs-remote/remote/pages/index.js b/react-nextjs/react-host-nextjs-remote/remote/pages/index.js
index dc4b6403521..443c98edd21 100644
--- a/react-nextjs/react-host-nextjs-remote/remote/pages/index.js
+++ b/react-nextjs/react-host-nextjs-remote/remote/pages/index.js
@@ -1,6 +1,6 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import Head from 'next/head';
+import Image from 'next/image';
+import styles from '../styles/Home.module.css';
 
 export default function Home() {
   return (
@@ -17,8 +17,7 @@ export default function Home() {
         </h1>
 
         <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
+          Get started by editing <code className={styles.code}>pages/index.js</code>
         </p>
 
         <div className={styles.grid}>
@@ -32,10 +31,7 @@ export default function Home() {
             <p>Learn about Next.js in an interactive course with quizzes!</p>
           </a>
 
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
+          <a href="https://github.com/vercel/next.js/tree/canary/examples" className={styles.card}>
             <h2>Examples &rarr;</h2>
             <p>Discover and deploy boilerplate example Next.js projects.</p>
           </a>
@@ -45,9 +41,7 @@ export default function Home() {
             className={styles.card}
           >
             <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
+            <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
           </a>
         </div>
       </main>
@@ -65,5 +59,5 @@ export default function Home() {
         </a>
       </footer>
     </div>
-  )
+  );
 }
diff --git a/react-nextjs/react-host-remote/host/src/App.jsx b/react-nextjs/react-host-remote/host/src/App.jsx
index 1a8f651177b..39aca6848f2 100644
--- a/react-nextjs/react-host-remote/host/src/App.jsx
+++ b/react-nextjs/react-host-remote/host/src/App.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import RemoteNav from 'remote/Nav'
+import RemoteNav from 'remote/Nav';
 // This is case you want to expose the entire App
 // no see the case but its possible
 // import RemoteApp from 'remote/App'
@@ -7,13 +7,10 @@ import RemoteNav from 'remote/Nav'
 function App() {
   return (
     <>
-      <div>
-        This is the container App hosted at localhost:8080
-      </div>
+      <div>This is the container App hosted at localhost:8080</div>
       <RemoteNav />
       <hr />
     </>
-      
   );
 }
 
diff --git a/react-nextjs/react-host-remote/host/src/bootstrap.jsx b/react-nextjs/react-host-remote/host/src/bootstrap.jsx
index 67f60c6af07..8f395e4426a 100644
--- a/react-nextjs/react-host-remote/host/src/bootstrap.jsx
+++ b/react-nextjs/react-host-remote/host/src/bootstrap.jsx
@@ -3,4 +3,4 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 const container = document.getElementById('root');
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
-root.render(<App />);
\ No newline at end of file
+root.render(<App />);
diff --git a/react-nextjs/react-host-remote/host/src/components/Nav.jsx b/react-nextjs/react-host-remote/host/src/components/Nav.jsx
index d3c75e9dc8c..ed972649670 100644
--- a/react-nextjs/react-host-remote/host/src/components/Nav.jsx
+++ b/react-nextjs/react-host-remote/host/src/components/Nav.jsx
@@ -13,7 +13,8 @@ const Nav = () => {
         justifyContent: 'center',
         alignItems: 'center',
         fontSize: '24px',
-      }}>
+      }}
+    >
       This component is from the Host React App hosted at localhost:8081
     </nav>
   );
diff --git a/react-nextjs/react-host-remote/host/webpack.config.js b/react-nextjs/react-host-remote/host/webpack.config.js
index 05188168991..2b2c298c8aa 100644
--- a/react-nextjs/react-host-remote/host/webpack.config.js
+++ b/react-nextjs/react-host-remote/host/webpack.config.js
@@ -6,7 +6,7 @@ module.exports = {
   entry: {
     app: {
       import: './src/index',
-    }
+    },
   },
   cache: false,
 
@@ -52,10 +52,8 @@ module.exports = {
       remotes: {
         remote: 'remote@http://localhost:8081/remoteEntry.js',
       },
-      exposes: {
-      },
-      shared: {
-      },
+      exposes: {},
+      shared: {},
     }),
     new HtmlWebpackPlugin({
       template: './public/index.html',
diff --git a/react-nextjs/react-host-remote/remote/src/App.jsx b/react-nextjs/react-host-remote/remote/src/App.jsx
index 8781e42f29d..1a6ca634302 100644
--- a/react-nextjs/react-host-remote/remote/src/App.jsx
+++ b/react-nextjs/react-host-remote/remote/src/App.jsx
@@ -1,24 +1,22 @@
 import React from 'react';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
 import Nav from './components/Nav';
 
 function App() {
   return (
-    <div style={{
-      border: 'solid',
-      borderRadius: '10px',
-      borderColor: '#0000ff',
-    }}>
-      <div>
-        This is the Remote App hosted at localhost:8081) 
-      </div>
+    <div
+      style={{
+        border: 'solid',
+        borderRadius: '10px',
+        borderColor: '#0000ff',
+      }}
+    >
+      <div>This is the Remote App hosted at localhost:8081)</div>
       <nav>
-        <Link to="/invoices">Invoices</Link> |{" "}
-        <Link to="/expenses">Expenses</Link>
+        <Link to="/invoices">Invoices</Link> | <Link to="/expenses">Expenses</Link>
       </nav>
       <Nav />
     </div>
-      
   );
 }
 
diff --git a/react-nextjs/react-host-remote/remote/src/bootstrap.jsx b/react-nextjs/react-host-remote/remote/src/bootstrap.jsx
index 3f13920a114..53975a00bb6 100644
--- a/react-nextjs/react-host-remote/remote/src/bootstrap.jsx
+++ b/react-nextjs/react-host-remote/remote/src/bootstrap.jsx
@@ -1,7 +1,7 @@
 import App from './App';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 const container = document.getElementById('root-remote');
 import Invoices from './routes/Invoices';
 const root = createRoot(container); // createRoot(container!) if you use TypeScript
@@ -11,5 +11,5 @@ root.render(
       <Route path="/" element={<App />} />
       <Route path="invoices" element={<Invoices />} />
     </Routes>
-  </BrowserRouter>
-);
\ No newline at end of file
+  </BrowserRouter>,
+);
diff --git a/react-nextjs/react-host-remote/remote/src/components/Nav.jsx b/react-nextjs/react-host-remote/remote/src/components/Nav.jsx
index d2467dc6ae8..cc714d313b1 100644
--- a/react-nextjs/react-host-remote/remote/src/components/Nav.jsx
+++ b/react-nextjs/react-host-remote/remote/src/components/Nav.jsx
@@ -4,11 +4,10 @@ import './Nav.css';
 const Nav = () => {
   return (
     <>
-      <div className='custom-nav'>
+      <div className="custom-nav">
         This component is from the Host React App hosted at localhost:8081
-      </div>      
+      </div>
     </>
-    
   );
 };
 
diff --git a/react-nextjs/react-host-remote/remote/src/routes/Invoices.jsx b/react-nextjs/react-host-remote/remote/src/routes/Invoices.jsx
index b3adf1da760..256cc96c972 100644
--- a/react-nextjs/react-host-remote/remote/src/routes/Invoices.jsx
+++ b/react-nextjs/react-host-remote/remote/src/routes/Invoices.jsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react';
 export default function Invoices() {
   return (
-    <main style={{ padding: "1rem 0" }}>
+    <main style={{ padding: '1rem 0' }}>
       <h2>Invoices</h2>
     </main>
   );
diff --git a/react-nextjs/react-host-remote/remote/webpack.config.js b/react-nextjs/react-host-remote/remote/webpack.config.js
index 276c04d84b9..5db7d13b1e4 100644
--- a/react-nextjs/react-host-remote/remote/webpack.config.js
+++ b/react-nextjs/react-host-remote/remote/webpack.config.js
@@ -6,7 +6,7 @@ module.exports = {
   entry: {
     app: {
       import: './src/index',
-    }
+    },
   },
   cache: false,
 
@@ -44,7 +44,7 @@ module.exports = {
       },
       {
         test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
+        use: ['style-loader', 'css-loader'],
       },
     ],
   },
@@ -62,8 +62,7 @@ module.exports = {
         // no see the case but its possible
         // './App': './src/index',
       },
-      shared: {
-      },
+      shared: {},
     }),
     new HtmlWebpackPlugin({
       template: './public/index.html',