Implement loadable with lazy and suspense for next dynamic #42589

huozhi · 2022-11-07T15:43:06Z

Summary

Migrate next/dynamic to implementation based on React.lazy and Suspense. Then it becomes easier to migrate the existing code in pages to layouts. Then we can support both ssr and loading option for next/dynamic.

For loading option, it will work like Suspense's fallback property

<Suspense fallback={loading}>
  <DynamicComponent />
 </Suspense>

For ssr option, by default React.lazy supports SSR, but we'll disable the ssr: false case for dynamic import in server components since there's no client side involved.

Then we don't need suspense option anymore as react >= 18 is always required. Mark it as deprecated.

It also supports to load client component dynamically in server components now.

Code code changes

switch loadable component to lazy + Suspense
will make sure it's retuning a module from loader() to loader().then(mod => ({ default: mod.default || mod })) since lazy() only accepts loader returning a module
Inside suspense boundary, throwing an error for ssr: false, catch the error on server and client side and ignore it.
Ignore options like ssr: false for server components since they're on server, doesn't make sense
Remove legacy dynamic related transform

Feature changes

next/dynamic will work in the same way across the board (appDir and pages)
For the throwing error, will make it become a API that throws error later in the future, so users can customize more with Suspense
You can load client components now in server components with dynamic. Resolves [appDir] Dynamically importing a Client Component using the 'use client' directive from a Server Component causes "Error: object is not a function" #43147

Tests

existing dynamic tests all work
add case: import client component and load through next/dynamic in server components

Issues

ijjk · 2022-11-07T16:21:15Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js suspensey-dynamic	Change
buildDuration	38.2s	36.8s	-1.3s
buildDurationCached	9.6s	9.9s	⚠️ +353ms
nodeModulesSize	94.8 MB	94.8 MB	⚠️ +1.5 kB
nextStartRea..uration (ms)	281ms	277ms	-4ms

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js suspensey-dynamic	Change
246.HASH.js gzip	181 B	180 B	-1 B
437-HASH.js gzip	64.3 kB	64.4 kB	⚠️ +97 B
main-app-HASH.js gzip	200 B	199 B	-1 B
main-HASH.js gzip	78.8 kB	78.9 kB	⚠️ +120 B
webpack-HASH.js gzip	1.7 kB	1.7 kB	-3 B
Overall change	145 kB	145 kB	⚠️ +212 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js suspensey-dynamic	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	huozhi/next.js suspensey-dynamic	Change
_app-HASH.js gzip	192 B	191 B	-1 B
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	482 B	483 B	⚠️ +1 B
css-HASH.js gzip	904 B	904 B	✓
dynamic-HASH.js gzip	2.31 kB	2.29 kB	-18 B
edge-ssr-HASH.js gzip	259 B	259 B	✓
head-HASH.js gzip	830 B	827 B	-3 B
hooks-HASH.js gzip	851 B	850 B	-1 B
image-HASH.js gzip	4.25 kB	4.25 kB	-4 B
index-HASH.js gzip	253 B	252 B	-1 B
link-HASH.js gzip	2.69 kB	2.68 kB	-3 B
routerDirect..HASH.js gzip	782 B	781 B	-1 B
script-HASH.js gzip	860 B	855 B	-5 B
withRouter-HASH.js gzip	782 B	779 B	-3 B
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	15.7 kB	15.7 kB	-39 B

Client Build Manifests

	vercel/next.js canary	huozhi/next.js suspensey-dynamic	Change
_buildManifest.js gzip	483 B	483 B	✓
Overall change	483 B	483 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js suspensey-dynamic	Change
index.html gzip	490 B	491 B	⚠️ +1 B
link.html gzip	505 B	506 B	⚠️ +1 B
withRouter.html gzip	485 B	485 B	✓
Overall change	1.48 kB	1.48 kB	⚠️ +2 B

Edge SSR bundle Size Overall decrease ✓

	vercel/next.js canary	huozhi/next.js suspensey-dynamic	Change
edge-ssr.js gzip	110 kB	110 kB	-91 B
page.js gzip	97.9 kB	97.9 kB	⚠️ +16 B
Overall change	208 kB	208 kB	-75 B

Middleware size Overall decrease ✓

	vercel/next.js canary	huozhi/next.js suspensey-dynamic	Change
middleware-b..fest.js gzip	586 B	585 B	-1 B
middleware-r..fest.js gzip	145 B	144 B	-1 B
middleware.js gzip	27.2 kB	27.2 kB	-6 B
edge-runtime..pack.js gzip	1.83 kB	1.83 kB	✓
Overall change	29.7 kB	29.7 kB	-8 B

Diffs

Diff for page.js

Diff too large to display

Diff for middleware-b..-manifest.js

@@ -7,81 +7,81 @@ self.__BUILD_MANIFEST = {
     "static/BUILD_ID/_ssgManifest.js"
   ],
   rootMainFiles: [
-    "static/chunks/webpack-778ee737b42dbd09.js",
-    "static/chunks/437-fcc1073958b4ec97.js",
-    "static/chunks/main-app-a3ea97a552128573.js"
+    "static/chunks/webpack-18ba22fbfdc26df1.js",
+    "static/chunks/303-fe79e5b21c62cdff.js",
+    "static/chunks/main-app-8a67d1efdca28dd0.js"
   ],
   pages: {
     "/": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
-      "static/chunks/pages/index-72f4ed6964652f6a.js"
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
+      "static/chunks/pages/index-d30a580d3c17f4d9.js"
     ],
     "/_app": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
-      "static/chunks/pages/_app-02fdba2e11c62c3b.js"
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
+      "static/chunks/pages/_app-3a8e7c7946c2bd53.js"
     ],
     "/_error": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
-      "static/chunks/pages/_error-c6d6c7c386122218.js"
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
+      "static/chunks/pages/_error-a9ef5f835b494eed.js"
     ],
     "/amp": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
-      "static/chunks/pages/amp-b62e7c28809c13e0.js"
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
+      "static/chunks/pages/amp-0caeab3cd7ed5bbd.js"
     ],
     "/css": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
       "static/css/94fdbc56eafa2039.css",
-      "static/chunks/pages/css-9ff2b163b1f26520.js"
+      "static/chunks/pages/css-a9db2d7f8fc4c5df.js"
     ],
     "/dynamic": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
-      "static/chunks/pages/dynamic-4591ab3efbed1651.js"
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
+      "static/chunks/pages/dynamic-22676b8e3bef59c7.js"
     ],
     "/edge-ssr": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
-      "static/chunks/pages/edge-ssr-a57e88de1ff426bd.js"
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
+      "static/chunks/pages/edge-ssr-5d2cdb3b4a9fabd5.js"
     ],
     "/head": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
-      "static/chunks/pages/head-b5894c626904a778.js"
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
+      "static/chunks/pages/head-248ef55290815b7c.js"
     ],
     "/hooks": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
-      "static/chunks/pages/hooks-874b5779f127e436.js"
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
+      "static/chunks/pages/hooks-624e3ee1c369c918.js"
     ],
     "/image": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
-      "static/chunks/pages/image-854b6400b5b29f63.js"
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
+      "static/chunks/pages/image-96d840698946c2ee.js"
     ],
     "/link": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
-      "static/chunks/pages/link-64f5c14f89f65607.js"
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
+      "static/chunks/pages/link-4acf1a45f96a1672.js"
     ],
     "/routerDirect": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
-      "static/chunks/pages/routerDirect-0be908911bf83c00.js"
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
+      "static/chunks/pages/routerDirect-5c05820a2fc8ec29.js"
     ],
     "/script": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
-      "static/chunks/pages/script-fa22c9b29b4b53ec.js"
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
+      "static/chunks/pages/script-20414a8a58346938.js"
     ],
     "/withRouter": [
-      "static/chunks/webpack-778ee737b42dbd09.js",
-      "static/chunks/main-d4f615235cf36703.js",
-      "static/chunks/pages/withRouter-9bdea6c06adf2771.js"
+      "static/chunks/webpack-18ba22fbfdc26df1.js",
+      "static/chunks/main-2a66778728903fb5.js",
+      "static/chunks/pages/withRouter-edc4e76b107d965e.js"
     ]
   },
   ampFirstPages: []

Diff for middleware-r..-manifest.js

@@ -1,6 +1,6 @@
 self.__REACT_LOADABLE_MANIFEST = {
   "dynamic.js -> ../components/hello": {
-    id: 1246,
-    files: ["static/chunks/246.a0afad3905ddc3ff.js"]
+    id: 753,
+    files: ["static/chunks/753.d8039168a3bcc2bf.js"]
   }
 };

Diff for middleware.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [826],
   {
-    /***/ 1675: /***/ (
+    /***/ 5354: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -14,7 +14,7 @@
       __webpack_require__.d(__webpack_exports__, {
         default: () =>
           /* binding */ next_middleware_loaderabsolutePagePath_private_next_root_dir_2Fmiddleware_js_page_2Fmiddleware_rootDir_2Ftmp_2Fnext_stats_2Fstats_app_matchers_
-      }); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/error.js
+      }); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/error.js
 
       class PageSignatureError extends Error {
         constructor({ page }) {
@@ -41,7 +41,7 @@
   Read more: https://nextjs.org/docs/messages/middleware-parse-user-agent
   `);
         }
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/utils.js
+      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/utils.js
 
       //# sourceMappingURL=error.js.map
       function fromNodeHeaders(object) {
@@ -157,7 +157,7 @@
             }
           );
         }
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/fetch-event.js
+      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/fetch-event.js
 
       //# sourceMappingURL=utils.js.map
       const responseSymbol = Symbol("response");
@@ -203,7 +203,7 @@
             page: this.sourcePage
           });
         }
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/i18n/detect-domain-locale.js
+      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/i18n/detect-domain-locale.js
 
       //# sourceMappingURL=fetch-event.js.map
       function detectDomainLocale(domainItems, hostname, detectedLocale) {
@@ -232,7 +232,7 @@
           }
         }
         return domainItem;
-      } //# sourceMappingURL=detect-domain-locale.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/remove-trailing-slash.js
+      } //# sourceMappingURL=detect-domain-locale.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/remove-trailing-slash.js
 
       /**
        * Removes the trailing slash for a given route or page path. Preserves the
@@ -242,7 +242,7 @@
        *   - `/` -> `/`
        */ function removeTrailingSlash(route) {
         return route.replace(/\/$/, "") || "/";
-      } //# sourceMappingURL=remove-trailing-slash.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/parse-path.js
+      } //# sourceMappingURL=remove-trailing-slash.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/parse-path.js
 
       /**
        * Given a path this function will find the pathname, query and hash and return
@@ -270,7 +270,7 @@
           query: "",
           hash: ""
         };
-      } //# sourceMappingURL=parse-path.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/add-path-prefix.js
+      } //# sourceMappingURL=parse-path.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/add-path-prefix.js
 
       /**
        * Adds the provided prefix to the given path. It first ensures that the path
@@ -281,7 +281,7 @@
         }
         const { pathname, query, hash } = parsePath(path);
         return `${prefix}${pathname}${query}${hash}`;
-      } //# sourceMappingURL=add-path-prefix.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/add-path-suffix.js
+      } //# sourceMappingURL=add-path-prefix.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/add-path-suffix.js
 
       /**
        * Similarly to `addPathPrefix`, this function adds a suffix at the end on the
@@ -293,7 +293,7 @@
         }
         const { pathname, query, hash } = parsePath(path);
         return `${pathname}${suffix}${query}${hash}`;
-      } //# sourceMappingURL=add-path-suffix.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/path-has-prefix.js
+      } //# sourceMappingURL=add-path-suffix.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/path-has-prefix.js
 
       /**
        * Checks if a given path starts with a given prefix. It ensures it matches
@@ -307,7 +307,7 @@
         }
         const { pathname } = parsePath(path);
         return pathname === prefix || pathname.startsWith(prefix + "/");
-      } //# sourceMappingURL=path-has-prefix.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/add-locale.js
+      } //# sourceMappingURL=path-has-prefix.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/add-locale.js
 
       /**
        * For a given path and a locale, if the locale is given, it will prefix the
@@ -324,7 +324,7 @@
           return addPathPrefix(path, `/${locale}`);
         }
         return path;
-      } //# sourceMappingURL=add-locale.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/format-next-pathname-info.js
+      } //# sourceMappingURL=add-locale.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/format-next-pathname-info.js
 
       function formatNextPathnameInfo(info) {
         let pathname = addLocale(
@@ -348,7 +348,7 @@
             ? addPathSuffix(pathname, "/")
             : pathname
           : removeTrailingSlash(pathname);
-      } //# sourceMappingURL=format-next-pathname-info.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/get-hostname.js
+      } //# sourceMappingURL=format-next-pathname-info.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/get-hostname.js
 
       /**
        * Takes an object with a hostname property (like a parsed URL) and some
@@ -363,7 +363,7 @@
           parsed.hostname) == null
           ? void 0
           : ref.split(":")[0].toLowerCase();
-      } //# sourceMappingURL=get-hostname.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/i18n/normalize-locale-path.js
+      } //# sourceMappingURL=get-hostname.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/i18n/normalize-locale-path.js
 
       /**
        * For a pathname that may include a locale from a list of locales, it
@@ -393,7 +393,7 @@
           pathname,
           detectedLocale
         };
-      } //# sourceMappingURL=normalize-locale-path.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/remove-path-prefix.js
+      } //# sourceMappingURL=normalize-locale-path.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/remove-path-prefix.js
 
       /**
        * Given a path and a prefix it will remove the prefix when it exists in the
@@ -409,7 +409,7 @@
             : `/${withoutPrefix}`;
         }
         return path;
-      } //# sourceMappingURL=remove-path-prefix.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/get-next-pathname-info.js
+      } //# sourceMappingURL=remove-path-prefix.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/get-next-pathname-info.js
 
       function getNextPathnameInfo(pathname, options) {
         var _nextConfig;
@@ -446,7 +446,7 @@
             info.pathname;
         }
         return info;
-      } //# sourceMappingURL=get-next-pathname-info.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/next-url.js
+      } //# sourceMappingURL=get-next-pathname-info.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/next-url.js
 
       const REGEX_LOCALHOST_HOSTNAME = /(?!^https?:\/\/)(127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}|::1|localhost)/;
       function parseURL(url, base) {
@@ -655,7 +655,7 @@
         clone() {
           return new NextURL(String(this), this[Internal].options);
         }
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/cookies/serialize.js
+      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/cookies/serialize.js
 
       //# sourceMappingURL=next-url.js.map
       const SAME_SITE = ["strict", "lax", "none"];
@@ -737,7 +737,7 @@
           })
         };
         return compact(cookie);
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/cookies/request-cookies.js
+      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/cookies/request-cookies.js
 
       //# sourceMappingURL=serialize.js.map
       /**
@@ -830,7 +830,7 @@
             Object.fromEntries(this._parsed)
           )}`;
         }
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/cookies/response-cookies.js
+      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/cookies/response-cookies.js
 
       //# sourceMappingURL=request-cookies.js.map
       function replace(bag, headers) {
@@ -925,7 +925,7 @@
             Object.fromEntries(this._parsed)
           )}`;
         }
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/cookies/index.js // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/request.js
+      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/cookies/index.js // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/request.js
 
       //# sourceMappingURL=response-cookies.js.map
       //# sourceMappingURL=index.js.map
@@ -1000,7 +1000,7 @@
         get url() {
           return this[INTERNALS].url.toString();
         }
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/response.js
+      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/response.js
 
       //# sourceMappingURL=request.js.map
       const response_INTERNALS = Symbol("internal response");
@@ -1100,7 +1100,7 @@
             headers
           });
         }
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/relativize-url.js
+      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/relativize-url.js
 
       //# sourceMappingURL=response.js.map
       /**
@@ -1114,7 +1114,7 @@
         return `${relative.protocol}//${relative.host}` === origin
           ? relative.toString().replace(origin, "")
           : relative.toString();
-      } //# sourceMappingURL=relativize-url.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/internal-utils.js
+      } //# sourceMappingURL=relativize-url.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/internal-utils.js
 
       const INTERNAL_QUERY_NAMES = [
         "__nextFallback",
@@ -1138,7 +1138,7 @@
           }
         }
         return searchParams;
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/app-paths.js
+      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/shared/lib/router/utils/app-paths.js
 
       //# sourceMappingURL=internal-utils.js.map
       // remove (name) from pathname as it's not considered for routing
@@ -1162,7 +1162,7 @@
       }
       function normalizeRscPath(pathname, enabled) {
         return enabled ? pathname.replace(/\.rsc($|\?)/, "") : pathname;
-      } //# sourceMappingURL=app-paths.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/client/components/app-router-headers.js
+      } //# sourceMappingURL=app-paths.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/client/components/app-router-headers.js
 
       const RSC = "RSC";
       const NEXT_ROUTER_STATE_TREE = "Next-Router-State-Tree";
@@ -1173,7 +1173,7 @@
         [RSC],
         [NEXT_ROUTER_STATE_TREE],
         [NEXT_ROUTER_PREFETCH]
-      ]; //# sourceMappingURL=app-router-headers.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/adapter.js
+      ]; //# sourceMappingURL=app-router-headers.js.map // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/adapter.js
 
       class NextRequestHint extends NextRequest {
         constructor(params) {
@@ -1396,12 +1396,12 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
           enumerable: false,
           configurable: false
         });
-      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/build/webpack/loaders/next-middleware-loader.js?absolutePagePath=private-next-root-dir%2Fmiddleware.js&page=%2Fmiddleware&rootDir=%2Ftmp%2Fnext-stats%2Fstats-app&matchers=!
+      } // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/build/webpack/loaders/next-middleware-loader.js?absolutePagePath=private-next-root-dir%2Fmiddleware.js&page=%2Fmiddleware&rootDir=%2Ftmp%2Fnext-stats%2Fstats-app&matchers=!
 
       //# sourceMappingURL=adapter.js.map
       enhanceGlobals();
 
-      var mod = __webpack_require__(1085);
+      var mod = __webpack_require__(3578);
       var handler = mod.middleware || mod.default;
 
       if (typeof handler !== "function") {
@@ -1425,7 +1425,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 1085: /***/ (
+    /***/ 3578: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -1437,7 +1437,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         /* harmony export */
       });
       /* harmony import */ var next_server__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        8352
+        9541
       );
       /* harmony import */ var next_server__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(
         next_server__WEBPACK_IMPORTED_MODULE_0__
@@ -1450,7 +1450,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 4989: /***/ (__unused_webpack_module, exports) => {
+    /***/ 5230: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1470,7 +1470,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 1962: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2546: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1508,7 +1508,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 6450: /***/ (__unused_webpack_module, exports) => {
+    /***/ 9248: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1540,15 +1540,19 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 12: /***/ (__unused_webpack_module, exports, __webpack_require__) => {
+    /***/ 540: /***/ (
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
       exports.addLocale = addLocale;
-      var _addPathPrefix = __webpack_require__(3120);
-      var _pathHasPrefix = __webpack_require__(3245);
+      var _addPathPrefix = __webpack_require__(553);
+      var _pathHasPrefix = __webpack_require__(7699);
       function addLocale(path, locale, defaultLocale, ignorePrefix) {
         if (
           locale &&
@@ -1568,7 +1572,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 3120: /***/ (
+    /***/ 553: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1579,7 +1583,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         value: true
       });
       exports.addPathPrefix = addPathPrefix;
-      var _parsePath = __webpack_require__(7718);
+      var _parsePath = __webpack_require__(4746);
       function addPathPrefix(path, prefix) {
         if (!path.startsWith("/") || !prefix) {
           return path;
@@ -1591,7 +1595,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 5839: /***/ (
+    /***/ 9740: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1602,7 +1606,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         value: true
       });
       exports.addPathSuffix = addPathSuffix;
-      var _parsePath = __webpack_require__(7718);
+      var _parsePath = __webpack_require__(4746);
       function addPathSuffix(path, suffix) {
         if (!path.startsWith("/") || !suffix) {
           return path;
@@ -1614,7 +1618,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 9364: /***/ (
+    /***/ 856: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1625,10 +1629,10 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         value: true
       });
       exports.formatNextPathnameInfo = formatNextPathnameInfo;
-      var _removeTrailingSlash = __webpack_require__(9944);
-      var _addPathPrefix = __webpack_require__(3120);
-      var _addPathSuffix = __webpack_require__(5839);
-      var _addLocale = __webpack_require__(12);
+      var _removeTrailingSlash = __webpack_require__(8735);
+      var _addPathPrefix = __webpack_require__(553);
+      var _addPathSuffix = __webpack_require__(9740);
+      var _addLocale = __webpack_require__(540);
       function formatNextPathnameInfo(info) {
         let pathname = (0, _addLocale).addLocale(
           info.pathname,
@@ -1659,7 +1663,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 9551: /***/ (
+    /***/ 4835: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1670,9 +1674,9 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         value: true
       });
       exports.getNextPathnameInfo = getNextPathnameInfo;
-      var _normalizeLocalePath = __webpack_require__(6450);
-      var _removePathPrefix = __webpack_require__(4933);
-      var _pathHasPrefix = __webpack_require__(3245);
+      var _normalizeLocalePath = __webpack_require__(9248);
+      var _removePathPrefix = __webpack_require__(5627);
+      var _pathHasPrefix = __webpack_require__(7699);
       function getNextPathnameInfo(pathname, options) {
         var _nextConfig;
         const { basePath, i18n, trailingSlash } =
@@ -1722,7 +1726,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 7718: /***/ (__unused_webpack_module, exports) => {
+    /***/ 4746: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1756,7 +1760,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 3245: /***/ (
+    /***/ 7699: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1767,7 +1771,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         value: true
       });
       exports.pathHasPrefix = pathHasPrefix;
-      var _parsePath = __webpack_require__(7718);
+      var _parsePath = __webpack_require__(4746);
       function pathHasPrefix(path, prefix) {
         if (typeof path !== "string") {
           return false;
@@ -1779,7 +1783,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 4933: /***/ (
+    /***/ 5627: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1790,7 +1794,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         value: true
       });
       exports.removePathPrefix = removePathPrefix;
-      var _pathHasPrefix = __webpack_require__(3245);
+      var _pathHasPrefix = __webpack_require__(7699);
       function removePathPrefix(path, prefix) {
         if ((0, _pathHasPrefix).pathHasPrefix(path, prefix)) {
           const withoutPrefix = path.slice(prefix.length);
@@ -1804,7 +1808,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 9944: /***/ (__unused_webpack_module, exports) => {
+    /***/ 8735: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1818,7 +1822,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 6166: /***/ (module, exports, __webpack_require__) => {
+    /***/ 6204: /***/ (module, exports, __webpack_require__) => {
       var __dirname = "/";
       var __WEBPACK_AMD_DEFINE_RESULT__;
       (() => {
@@ -2660,7 +2664,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 4524: /***/ (__unused_webpack_module, exports) => {
+    /***/ 8666: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -2701,7 +2705,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 3062: /***/ (
+    /***/ 4901: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2711,10 +2715,10 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      var _detectDomainLocale = __webpack_require__(1962);
-      var _formatNextPathnameInfo = __webpack_require__(9364);
-      var _getHostname = __webpack_require__(4989);
-      var _getNextPathnameInfo = __webpack_require__(9551);
+      var _detectDomainLocale = __webpack_require__(2546);
+      var _formatNextPathnameInfo = __webpack_require__(856);
+      var _getHostname = __webpack_require__(5230);
+      var _getNextPathnameInfo = __webpack_require__(4835);
       const REGEX_LOCALHOST_HOSTNAME = /(?!^https?:\/\/)(127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}|::1|localhost)/;
       function parseURL(url, base) {
         return new URL(
@@ -2934,7 +2938,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 6915: /***/ (
+    /***/ 4580: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2956,15 +2960,15 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
           return _responseCookies.ResponseCookies;
         }
       });
-      var _requestCookies = __webpack_require__(6079);
-      var _responseCookies = __webpack_require__(9442);
+      var _requestCookies = __webpack_require__(7205);
+      var _responseCookies = __webpack_require__(9618);
 
       //# sourceMappingURL=index.js.map
 
       /***/
     },
 
-    /***/ 6079: /***/ (
+    /***/ 7205: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -2974,7 +2978,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      var _serialize = __webpack_require__(8213);
+      var _serialize = __webpack_require__(8477);
       class RequestCookies {
         _parsed = new Map();
         constructor(requestHeaders) {
@@ -3071,7 +3075,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 9442: /***/ (
+    /***/ 9618: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -3081,7 +3085,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      var _serialize = __webpack_require__(8213);
+      var _serialize = __webpack_require__(8477);
       function replace(bag, headers) {
         headers.delete("set-cookie");
         for (const [, value] of bag) {
@@ -3178,7 +3182,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 8213: /***/ (__unused_webpack_module, exports) => {
+    /***/ 8477: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -3269,7 +3273,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 5829: /***/ (
+    /***/ 5985: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -3281,10 +3285,10 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         value: true
       };
       __webpack_unused_export__ = void 0;
-      var _nextUrl = __webpack_require__(3062);
-      var _utils = __webpack_require__(88);
-      var _error = __webpack_require__(4524);
-      var _cookies = __webpack_require__(6915);
+      var _nextUrl = __webpack_require__(4901);
+      var _utils = __webpack_require__(30);
+      var _error = __webpack_require__(8666);
+      var _cookies = __webpack_require__(4580);
       const INTERNALS = Symbol("internal request");
       __webpack_unused_export__ = INTERNALS;
       class NextRequest extends Request {
@@ -3365,7 +3369,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 5277: /***/ (
+    /***/ 5165: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -3376,9 +3380,9 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       __webpack_unused_export__ = {
         value: true
       };
-      var _nextUrl = __webpack_require__(3062);
-      var _utils = __webpack_require__(88);
-      var _cookies = __webpack_require__(6915);
+      var _nextUrl = __webpack_require__(4901);
+      var _utils = __webpack_require__(30);
+      var _cookies = __webpack_require__(4580);
       const INTERNALS = Symbol("internal response");
       const REDIRECTS = new Set([301, 302, 303, 307, 308]);
       function handleMiddlewareField(init, headers) {
@@ -3487,7 +3491,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 7873: /***/ (
+    /***/ 9132: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -3501,7 +3505,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       __webpack_unused_export__ = isBot;
       exports.Nf = userAgentFromString;
       exports.WE = userAgent;
-      var _uaParserJs = _interopRequireDefault(__webpack_require__(6166));
+      var _uaParserJs = _interopRequireDefault(__webpack_require__(6204));
       function _interopRequireDefault(obj) {
         return obj && obj.__esModule
           ? obj
@@ -3529,7 +3533,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 88: /***/ (__unused_webpack_module, exports) => {
+    /***/ 30: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -3646,14 +3650,14 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 8352: /***/ (module, exports, __webpack_require__) => {
+    /***/ 9541: /***/ (module, exports, __webpack_require__) => {
       const serverExports = {
-        NextRequest: __webpack_require__(5829) /* .NextRequest */.Im,
-        NextResponse: __webpack_require__(5277) /* .NextResponse */.x,
+        NextRequest: __webpack_require__(5985) /* .NextRequest */.Im,
+        NextResponse: __webpack_require__(5165) /* .NextResponse */.x,
         userAgentFromString: __webpack_require__(
-          7873
+          9132
         ) /* .userAgentFromString */.Nf,
-        userAgent: __webpack_require__(7873) /* .userAgent */.WE
+        userAgent: __webpack_require__(9132) /* .userAgent */.WE
       };
 
       if (typeof URLPattern !== "undefined") {
@@ -3679,7 +3683,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = moduleId =>
       __webpack_require__((__webpack_require__.s = moduleId));
-    /******/ var __webpack_exports__ = __webpack_exec__(1675);
+    /******/ var __webpack_exports__ = __webpack_exec__(5354);
     /******/ (_ENTRIES =
       typeof _ENTRIES === "undefined"
         ? {}

Diff for edge-ssr.js

Diff too large to display

Diff for _buildManifest.js

@@ -1,28 +1,28 @@
 self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
-  "/": ["static\u002Fchunks\u002Fpages\u002Findex-72f4ed6964652f6a.js"],
-  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-c6d6c7c386122218.js"],
-  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-b62e7c28809c13e0.js"],
+  "/": ["static\u002Fchunks\u002Fpages\u002Findex-d30a580d3c17f4d9.js"],
+  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-a9ef5f835b494eed.js"],
+  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-0caeab3cd7ed5bbd.js"],
   "/css": [
     "static\u002Fcss\u002F94fdbc56eafa2039.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-9ff2b163b1f26520.js"
+    "static\u002Fchunks\u002Fpages\u002Fcss-a9db2d7f8fc4c5df.js"
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-4591ab3efbed1651.js"
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-22676b8e3bef59c7.js"
   ],
   "/edge-ssr": [
-    "static\u002Fchunks\u002Fpages\u002Fedge-ssr-a57e88de1ff426bd.js"
+    "static\u002Fchunks\u002Fpages\u002Fedge-ssr-5d2cdb3b4a9fabd5.js"
   ],
-  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-b5894c626904a778.js"],
-  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-874b5779f127e436.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-854b6400b5b29f63.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-64f5c14f89f65607.js"],
+  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-248ef55290815b7c.js"],
+  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-624e3ee1c369c918.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-96d840698946c2ee.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-4acf1a45f96a1672.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-0be908911bf83c00.js"
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-5c05820a2fc8ec29.js"
   ],
-  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-fa22c9b29b4b53ec.js"],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-20414a8a58346938.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-9bdea6c06adf2771.js"
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-edc4e76b107d965e.js"
   ],
   sortedPages: [
     "\u002F",

Diff for _app-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [888],
   {
-    /***/ 3115: /***/ function(
+    /***/ 1113: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_app",
         function() {
-          return __webpack_require__(5791);
+          return __webpack_require__(1731);
         }
       ]);
       if (false) {
@@ -24,7 +24,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [179], function() {
-      return __webpack_exec__(3115), __webpack_exec__(8995);
+      return __webpack_exec__(1113), __webpack_exec__(4888);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for _error-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [820],
   {
-    /***/ 5374: /***/ function(
+    /***/ 3363: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/_error",
         function() {
-          return __webpack_require__(9437);
+          return __webpack_require__(5750);
         }
       ]);
       if (false) {
@@ -24,7 +24,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 179], function() {
-      return __webpack_exec__(5374);
+      return __webpack_exec__(3363);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for amp-HASH.js

@@ -1,17 +1,17 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [216],
   {
-    /***/ 8510: /***/ function(
+    /***/ 8753: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(6146);
+      module.exports = __webpack_require__(8082);
 
       /***/
     },
 
-    /***/ 7010: /***/ function(
+    /***/ 5348: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -19,7 +19,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/amp",
         function() {
-          return __webpack_require__(2725);
+          return __webpack_require__(4749);
         }
       ]);
       if (false) {
@@ -28,7 +28,7 @@
       /***/
     },
 
-    /***/ 6146: /***/ function(module, exports, __webpack_require__) {
+    /***/ 8082: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -37,9 +37,9 @@
       exports.useAmp = useAmp;
       var _interop_require_default = __webpack_require__(1322) /* ["default"] */
         .Z;
-      var _react = _interop_require_default(__webpack_require__(2947));
-      var _ampContext = __webpack_require__(7298);
-      var _ampMode = __webpack_require__(3798);
+      var _react = _interop_require_default(__webpack_require__(465));
+      var _ampContext = __webpack_require__(4964);
+      var _ampMode = __webpack_require__(8701);
       function useAmp() {
         // Don't assign the context value to a variable to save bytes
         return (0, _ampMode).isInAmpMode(
@@ -61,7 +61,7 @@
       /***/
     },
 
-    /***/ 2725: /***/ function(
+    /***/ 4749: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -78,7 +78,7 @@
         /* harmony export */
       });
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        8510
+        8753
       );
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(
         next_amp__WEBPACK_IMPORTED_MODULE_0__
@@ -102,7 +102,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 179], function() {
-      return __webpack_exec__(7010);
+      return __webpack_exec__(5348);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for css-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [706],
   {
-    /***/ 860: /***/ function(
+    /***/ 6437: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/css",
         function() {
-          return __webpack_require__(2998);
+          return __webpack_require__(900);
         }
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5189: /***/ function(module) {
+    /***/ 4229: /***/ function(module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__qqNwY" };
       module.exports.__checksum =
@@ -27,7 +27,7 @@
       /***/
     },
 
-    /***/ 2998: /***/ function(
+    /***/ 900: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -35,10 +35,10 @@
       "use strict";
       __webpack_require__.r(__webpack_exports__);
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-        3268
+        9701
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-        5189
+        4229
       );
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/ __webpack_require__.n(
         _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -58,7 +58,7 @@
       /***/
     },
 
-    /***/ 6205: /***/ function(
+    /***/ 1963: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -73,7 +73,7 @@
        * This source code is licensed under the MIT license found in the
        * LICENSE file in the root directory of this source tree.
        */
-      var f = __webpack_require__(2947),
+      var f = __webpack_require__(465),
         k = Symbol.for("react.element"),
         l = Symbol.for("react.fragment"),
         m = Object.prototype.hasOwnProperty,
@@ -108,7 +108,7 @@
       /***/
     },
 
-    /***/ 3268: /***/ function(
+    /***/ 9701: /***/ function(
       module,
       __unused_webpack_exports,
       __webpack_require__
@@ -116,7 +116,7 @@
       "use strict";
 
       if (true) {
-        module.exports = __webpack_require__(6205);
+        module.exports = __webpack_require__(1963);
       } else {
       }
 
@@ -129,7 +129,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 179], function() {
-      return __webpack_exec__(860);
+      return __webpack_exec__(6437);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for dynamic-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [739],
   {
-    /***/ 3995: /***/ function(
+    /***/ 7753: /***/ function(
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/dynamic",
         function() {
-          return __webpack_require__(9780);
+          return __webpack_require__(6834);
         }
       ]);
       if (false) {
@@ -18,7 +18,38 @@
       /***/
     },
 
-    /***/ 4648: /***/ function(module, exports, __webpack_require__) {
+    /***/ 7101: /***/ function(
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports["default"] = NoSSR;
+      exports.suspense = suspense;
+      var _interop_require_default = __webpack_require__(1322) /* ["default"] */
+        .Z;
+      var _react = _interop_require_default(__webpack_require__(465));
+      var _noSsrError = __webpack_require__(7058);
+      function NoSSR(param) {
+        let { children } = param;
+        if (false) {
+        }
+        return children;
+      }
+      function suspense() {
+        const error = new Error(_noSsrError.NEXT_DYNAMIC_NO_SSR_CODE);
+        error.digest = _noSsrError.NEXT_DYNAMIC_NO_SSR_CODE;
+        throw error;
+      } //# sourceMappingURL=dynamic-no-ssr.js.map
+
+      /***/
+    },
+
+    /***/ 2494: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -29,24 +60,24 @@
       var _extends = __webpack_require__(5321) /* ["default"] */.Z;
       var _interop_require_default = __webpack_require__(1322) /* ["default"] */
         .Z;
-      var _react = _interop_require_default(__webpack_require__(2947));
-      var _loadable = _interop_require_default(__webpack_require__(7007));
+      var _interop_require_wildcard = __webpack_require__(
+        6687
+      ) /* ["default"] */.Z;
+      var _react = _interop_require_wildcard(__webpack_require__(465));
+      var _loadable = _interop_require_default(__webpack_require__(971));
+      var _dynamicNoSsr = _interop_require_default(__webpack_require__(7101));
       function dynamic(dynamicOptions, options) {
         let loadableFn = _loadable.default;
-        let loadableOptions = (options == null
-        ? void 0
-        : options.suspense)
-          ? {}
-          : {
-              // A loading component is not required, so we default it
-              loading: param => {
-                let { error, isLoading, pastDelay } = param;
-                if (!pastDelay) return null;
-                if (false) {
-                }
-                return null;
-              }
-            };
+        let loadableOptions = {
+          // A loading component is not required, so we default it
+          loading: param => {
+            let { error, isLoading, pastDelay } = param;
+            if (!pastDelay) return null;
+            if (false) {
+            }
+            return null;
+          }
+        };
         // Support for direct import(), eg: dynamic(import('../hello-world'))
         // Note that this is only kept for the edge case where someone is passing in a promise as first argument
         // The react-loadable babel plugin will turn dynamic(import('../hello-world')) into dynamic(() => import('../hello-world'))
@@ -62,53 +93,64 @@
         }
         // Support for passing options, eg: dynamic(import('../hello-world'), {loading: () => <p>Loading something</p>})
         loadableOptions = _extends({}, loadableOptions, options);
-        if (loadableOptions.suspense) {
-          if (false) {
-          }
-          delete loadableOptions.ssr;
-          delete loadableOptions.loading;
-        }
+        const loaderFn = loadableOptions.loader;
+        const loader = () => loaderFn().then(convertModule);
         // coming from build/babel/plugins/react-loadable-plugin.js
         if (loadableOptions.loadableGenerated) {
           loadableOptions = _extends(
             {},
             loadableOptions,
-            loadableOptions.loadableGenerated
+            loadableOptions.loadableGenerated,
+            {
+              loader
+            }
           );
           delete loadableOptions.loadableGenerated;
         }
-        // support for disabling server side rendering, eg: dynamic(import('../hello-world'), {ssr: false}).
-        // skip `ssr` for suspense mode and opt-in React.lazy directly
-        if (
-          typeof loadableOptions.ssr === "boolean" &&
-          !loadableOptions.suspense
-        ) {
+        // support for disabling server side rendering, eg: dynamic(() => import('../hello-world'), {ssr: false}).
+        if (typeof loadableOptions.ssr === "boolean") {
           if (!loadableOptions.ssr) {
             delete loadableOptions.ssr;
-            return noSSR(loadableFn, loadableOptions);
+            return noSSR(loader, loadableOptions);
           }
           delete loadableOptions.ssr;
         }
         return loadableFn(loadableOptions);
       }
-      const isServerSide = "object" === "undefined";
+      // Normalize loader to return the module as form { default: Component } for `React.lazy`.
+      // Also for backward compatible since next/dynamic allows to resolve a component directly with loader
+      // Client component reference proxy need to be converted to a module.
+      function convertModule(mod) {
+        return {
+          default: mod.default || mod
+        };
+      }
       function noSSR(LoadableInitializer, loadableOptions) {
         // Removing webpack and modules means react-loadable won't try preloading
         delete loadableOptions.webpack;
         delete loadableOptions.modules;
-        // This check is necessary to prevent react-loadable from initializing on the server
-        if (!isServerSide) {
-          return LoadableInitializer(loadableOptions);
-        }
+        const NoSSRComponent = /*#__PURE__*/ (0, _react).lazy(
+          LoadableInitializer
+        );
         const Loading = loadableOptions.loading;
-        // This will only be rendered on the server side
+        const fallback = /*#__PURE__*/ _react.default.createElement(Loading, {
+          error: null,
+          isLoading: true,
+          pastDelay: false,
+          timedOut: false
+        });
         return () =>
-          /*#__PURE__*/ _react.default.createElement(Loading, {
-            error: null,
-            isLoading: true,
-            pastDelay: false,
-            timedOut: false
-          });
+          /*#__PURE__*/ _react.default.createElement(
+            _react.Suspense,
+            {
+              fallback: fallback
+            },
+            /*#__PURE__*/ _react.default.createElement(
+              _dynamicNoSsr.default,
+              null,
+              /*#__PURE__*/ _react.default.createElement(NoSSRComponent, null)
+            )
+          );
       }
       if (
         (typeof exports.default === "function" ||
@@ -125,7 +167,7 @@
       /***/
     },
 
-    /***/ 1446: /***/ function(
+    /***/ 9605: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -138,7 +180,7 @@
       exports.LoadableContext = void 0;
       var _interop_require_default = __webpack_require__(1322) /* ["default"] */
         .Z;
-      var _react = _interop_require_default(__webpack_require__(2947));
+      var _react = _interop_require_default(__webpack_require__(465));
       const LoadableContext = _react.default.createContext(null);
       exports.LoadableContext = LoadableContext;
       if (false) {
@@ -147,7 +189,7 @@
       /***/
     },
 
-    /***/ 7007: /***/ function(
+    /***/ 971: /***/ function(
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -159,11 +201,10 @@
       });
       exports["default"] = void 0;
       var _extends = __webpack_require__(5321) /* ["default"] */.Z;
-      var _interop_require_wildcard = __webpack_require__(
-        6687
-      ) /* ["default"] */.Z;
-      var _react = _interop_require_wildcard(__webpack_require__(2947));
-      var _loadableContext = __webpack_require__(1446);
+      var _interop_require_default = __webpack_require__(1322) /* ["default"] */
+        .Z;
+      var _react = _interop_require_default(__webpack_require__(465));
+      var _loadableContext = __webpack_require__(9605);
       const ALL_INITIALIZERS = [];
       const READY_INITIALIZERS = [];
       let initialized = false;
@@ -187,9 +228,6 @@
           });
         return state;
       }
-      function resolve(obj) {
-        return obj && obj.__esModule ? obj.default : obj;
-      }
       function createLoadableComponent(loadFn, options) {
         let opts = Object.assign(
           {
@@ -198,14 +236,11 @@
             delay: 200,
             timeout: null,
             webpack: null,
-            modules: null,
-            suspense: false
+            modules: null
           },
           options
         );
-        if (opts.suspense) {
-          opts.lazy = _react.default.lazy(opts.loader);
-        }
+        opts.lazy = _react.default.lazy(opts.loader);
         /** @type LoadableSubscription */ let subscription = null;
         function init() {
           if (!subscription) {
@@ -250,49 +285,24 @@
             });
           }
         }
-        function LoadableImpl(props, ref) {
-          useLoadableModule();
-          const state = (0, _react).useSyncExternalStore(
-            subscription.subscribe,
-            subscription.getCurrentValue,
-            subscription.getCurrentValue
-          );
-          _react.default.useImperativeHandle(
-            ref,
-            () => ({
-              retry: subscription.retry
-            }),
-            []
-          );
-          return _react.default.useMemo(() => {
-            if (state.loading || state.error) {
-              return _react.default.createElement(opts.loading, {
-                isLoading: state.loading,
-                pastDelay: state.pastDelay,
-                timedOut: state.timedOut,
-                error: state.error,
-                retry: subscription.retry
-              });
-            } else if (state.loaded) {
-              return _react.default.createElement(resolve(state.loaded), props);
-            } else {
-              return null;
-            }
-          }, [props, state]);
-        }
-        function LazyImpl(props, ref) {
+        function LoadableComponent(props) {
           useLoadableModule();
+          const fallbackElement = _react.default.createElement(opts.loading, {
+            isLoading: true,
+            pastDelay: true,
+            error: null
+          });
           return _react.default.createElement(
-            opts.lazy,
-            _extends({}, props, {
-              ref
-            })
+            _react.default.Suspense,
+            {
+              fallback: fallbackElement
+            },
+            _react.default.createElement(opts.lazy, props)
           );
         }
-        const LoadableComponent = opts.suspense ? LazyImpl : LoadableImpl;
         LoadableComponent.preload = () => init();
         LoadableComponent.displayName = "LoadableComponent";
-        return _react.default.forwar
Post job cleanup.
[command]/usr/bin/git version
git version 2.38.1
Temporarily overriding HOME='/home/runner/work/_temp/0dcb729e-c70a-4fce-a27c-b96159281b27' before making global git config changes
Adding repository directory to the temporary git global config as a safe directory
[command]/usr/bin/git config --global --add safe.directory /home/runner/work/next.js/next.js
[command]/usr/bin/git config --local --name-only --get-regexp core\.sshCommand
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'core\.sshCommand' && git config --local --unset-all 'core.sshCommand' || :
[command]/usr/bin/git config --local --name-only --get-regexp http\.https\:\/\/github\.com\/\.extraheader
http.https://github.com/.extraheader
[command]/usr/bin/git config --local --unset-all http.https://github.com/.extraheader
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'http\.https\:\/\/github\.com\/\.extraheader' && git config --local --unset-all 'http.https://github.com/.extraheader' || :
Cleaning up orphan processes
Commit: 40d1f5d62b118a654d9ff7b1f5a2405ef5851e58

packages/next/shared/lib/loadable.js

SukkaW

Also, the test case added in #39676 should also be removed.

packages/next/shared/lib/dynamic.tsx

remove dynamic alias for app dir remove legacy test

fix tests update tests

fix build export

fix swc is_server_components compiler options fix cargo lint fix lint fix esm fix test pass down RecoverOnError

…r server component

Should not re-throw the error on client for errors from `onRecoverableError` callback in pages, this PR share it as a same callback between pages and app dir follow up for #42589

Now Next.js does not reuiqre suspense with dynamic imports unlike React >=18 always has always required. Simply placing Loading state within the dynamic imports can show the loading state without Suspense component. Minor: Removed the unused types. Reference: 1. vercel/next.js#42589 2. https://nextjs.org/docs/advanced-features/dynamic-import

arishoham · 2022-12-29T20:38:32Z

This changed the undocumented way to programmatically preload LoadableComponents from dynamic, it is now LoadableComponent.preload() rather than LoadableComponent.render.preload().

@klarstrup looks like .preload() no longer exists on LoadableComponent. We are using jest-next-dynamic which seems to have broken with this PR, any chance you know how to preload a component now?

Under further review, it looks like .preload() does not exist when ssr: false

klarstrup · 2023-01-02T11:00:51Z

@arishoham as described the method is still there except it is now on the parent rather than render

agusterodin · 2023-01-04T22:07:15Z

As of Next 13.1 it appears that preload method doesn't exist as described above. It doesn't even appear to be an object.

Is there a known fix?

agusterodin · 2023-01-04T22:41:20Z

I see that there is future planned "offscreen" support in React. Will this a solution?

https://reactjs.org/blog/2022/03/29/react-v18.html

klarstrup · 2023-01-04T22:44:38Z

As of Next 13.1 it appears that preload method doesn't exist as described above. It doesn't even appear to be an object.

Is there a known fix?

It's still there as described above

agusterodin · 2023-01-04T23:04:01Z

Hmm. I get a different result when console printing. Am I printing this out properly?

agusterodin · 2023-01-04T23:20:27Z

It appears that this change that makes it no longer an object occurred on Next 13.0.7. If I console log in 13.0.6, I get an object with preload function as expected. Can you please clear lockfile and pin to latest version of Next to verify?

davidgolden · 2023-01-04T23:35:57Z

Sorry to butt in on your discussion, but I finally nailed down a minimal reproducible example of an issue I'm seeing that appears related to this change. This is the error itself: Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition..

It can be reproduced easily enough with this component which I believe should work fine:

import dynamic from "next/dynamic";
import {Component} from "react";
const SomeComponent = dynamic(() => import("../src/SomeComponent"));

export default class Index extends Component<any, any> {
    state = {
        test: "123",
    }

    componentDidMount() {
        this.setState({
            test: "234",
        })
    }

    render() {
        return <SomeComponent />
    }
}

Where SomeComponent can be anything you want. It doesn't like setting state inside componentDidMount when rendering a dynamic component. I'm on next@13.1.1. I was not experiencing this issue in next@13.0.3.

klarstrup · 2023-01-04T23:38:22Z

@agusterodin did you try calling/logging Timeline.preload yet? You can use console.dir to see any properties of a function instead of the stringified function as console.logprovides

wadehammes · 2023-01-06T17:46:21Z

@huozhi are there plans to fix the underlying issue here as stated above?

arishoham · 2023-01-09T20:36:38Z

@agusterodin @klarstrup the issue is the preload function no longer exists when {ssr: false}

huozhi · 2023-01-12T21:21:01Z

@davidgolden you should use React.startTransition for the setState in componentDidMount as the react warning suggested

huozhi · 2023-01-12T21:34:10Z

Adding the preload() back in #44832

* Convert `loadable` to tsx for convenience * Merge `NoSSR` into `loadable` * Address the missing `preload` method mentioned in #42589 (comment) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

davidgolden · 2023-01-13T14:42:04Z

@davidgolden you should use React.startTransition for the setState in componentDidMount as the react warning suggested

This fixes it. I also just found that useLayoutEffect inside a dynamically loaded component causes the same issue. This feels like a bit of a breaking change that I'm surprised popped up in a minor version.

icekhab · 2023-02-03T08:31:59Z

@huozhi We can add startTransition to own code but it's problem when we use hooks from some library where setState is called in useEffect/useLayoutEffect :)

Are there any idea what we can do in this case?

huozhi · 2023-02-03T21:31:33Z

@icekhab could you file a new issue with more detailed repro and description for your case? Thanks

## Issue To address the problem that we introduced in 13.0.7 (#42589) where we thought we could use same implementation `next/dynamic` for both `pages/` and `app/` directory. But it turns out it leads to many problems, such as: * SSR preloading could miss the content, especially with nested dynamic calls * Closes #45213 * Introducing suspense boundary into `next/dynamic` with extra wrapped `<Suspense>` outside will lead to content is not resolevd during SSR * Related #45151 * Closes #45099 * Unexpected hydration errors for suspense boundaries. Though react removed this error but the 18.3 is not out yet. * Closes #44083 * Closes #45246 ## Solution Separate the dynamic implementation for `app/` dir and `pages/`. For `app/` dir we can encourage users to: * Directly use `React.lazy` + `Suspense` for SSR'd content, and `next/dynamic` * For non SSR components since it requires some internal integeration with next.js. For `pages/` dir we still keep the original implementation If you want to use `<Suspense>` with dynamic `fallback` value, use `React.lazy` + `Suspense` directly instead of picking up `next/dynamic` * Closes #45116 This will solve various issue before react 18.3 is out and let users still progressively upgrade to new versions of next.js. ## Bug Fix - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Nov 7, 2022

This comment was marked as outdated.

Sign in to view

SukkaW reviewed Nov 8, 2022

View reviewed changes

packages/next/shared/lib/loadable.js Outdated Show resolved Hide resolved

SukkaW suggested changes Nov 8, 2022

View reviewed changes

huozhi force-pushed the suspensey-dynamic branch from 040d5b3 to 7ba1242 Compare November 28, 2022 17:13

sebmarkbage reviewed Nov 28, 2022

View reviewed changes

packages/next/shared/lib/dynamic.tsx Outdated Show resolved Hide resolved

huozhi force-pushed the suspensey-dynamic branch from e49edd9 to 74ebe8d Compare November 30, 2022 16:43

ijjk force-pushed the canary branch 2 times, most recently from e078ebe to 6b863fe Compare December 2, 2022 05:49

huozhi force-pushed the suspensey-dynamic branch 2 times, most recently from c335533 to 4b757fe Compare December 2, 2022 19:35

huozhi requested a review from sebmarkbage December 2, 2022 20:11

huozhi marked this pull request as ready for review December 5, 2022 14:28

huozhi requested review from timneutkens, ijjk, shuding and padmaia as code owners December 5, 2022 14:28

huozhi added 8 commits December 6, 2022 12:54

Implement loadable with lazy and suspense for next dynamic

d71d84c

remove dynamic alias for app dir remove legacy test

use lazy to load inline component

800e88f

fix tests update tests

throw error for noSSR and recover from error on client

4b8723e

add error boundary to dynamic component

61d0fde

fix build export

strip dynamic options for server components

5024ddd

fix swc is_server_components compiler options fix cargo lint fix lint fix esm fix test pass down RecoverOnError

fix react mismatch

b2c9fb2

fix tests

3735799

backward compatible for loader and support import client component fo…

d217c24

…r server component

huozhi force-pushed the suspensey-dynamic branch from 92cd7d2 to d217c24 Compare December 6, 2022 11:56

fix build

be38baf

huozhi mentioned this pull request Dec 6, 2022

[appDir] Dynamically importing a Client Component using the 'use client' directive from a Server Component causes "Error: object is not a function" #43147

Closed

1 task

tpatalas mentioned this pull request Dec 24, 2022

refactor: Updated with Next.js's new dynamic import tpatalas/tp-next-todos#88

Merged

oceandrama mentioned this pull request Jan 2, 2023

13.0.7 - minified react error #421 (does not happen in 13.0.6) #44083

Closed

1 task

wadehammes mentioned this pull request Jan 10, 2023

dynamic import with ssr:false causes The server could not finish this Suspense boundary #44650

Closed

huozhi mentioned this pull request Jan 12, 2023

Refactor next dynamic #44832

Merged

cvbuelow mentioned this pull request Jan 20, 2023

[breaking] 13.0.7 next/dynamic: fallback no longer rendered for client side async component using suspense: true and <Suspense fallback={...}> #45116

Closed

1 task

wescopeland mentioned this pull request Jan 31, 2023

[v13] css modules not carried with dynamic imports #44994

Open

1 task

idmedia-kaiser mentioned this pull request Feb 1, 2023

next/dynamic causing Runtime Exception for Suspense boundary starting with 13.0.7 #45488

Closed

1 task

huozhi mentioned this pull request Feb 3, 2023

Separate next/dynamic implementation for app and pages #45565

Merged

3 tasks

github-actions bot locked as resolved and limited conversation to collaborators Mar 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement loadable with lazy and suspense for next dynamic #42589

Implement loadable with lazy and suspense for next dynamic #42589

huozhi commented Nov 7, 2022 •

edited

Loading

This comment was marked as outdated.

ijjk commented Nov 7, 2022 •

edited

Loading

Diffs

SukkaW left a comment

arishoham commented Dec 29, 2022 •

edited

Loading

klarstrup commented Jan 2, 2023

agusterodin commented Jan 4, 2023

agusterodin commented Jan 4, 2023

klarstrup commented Jan 4, 2023

agusterodin commented Jan 4, 2023

agusterodin commented Jan 4, 2023

davidgolden commented Jan 4, 2023 •

edited

Loading

klarstrup commented Jan 4, 2023

wadehammes commented Jan 6, 2023

arishoham commented Jan 9, 2023

huozhi commented Jan 12, 2023

huozhi commented Jan 12, 2023

davidgolden commented Jan 13, 2023

icekhab commented Feb 3, 2023 •

edited

Loading

huozhi commented Feb 3, 2023

Implement loadable with lazy and suspense for next dynamic #42589

Implement loadable with lazy and suspense for next dynamic #42589

Conversation

huozhi commented Nov 7, 2022 • edited Loading

Summary

Code code changes

Feature changes

Tests

Issues

This comment was marked as outdated.

ijjk commented Nov 7, 2022 • edited Loading

Stats from current PR

Diffs

SukkaW left a comment

Choose a reason for hiding this comment

arishoham commented Dec 29, 2022 • edited Loading

klarstrup commented Jan 2, 2023

agusterodin commented Jan 4, 2023

agusterodin commented Jan 4, 2023

klarstrup commented Jan 4, 2023

agusterodin commented Jan 4, 2023

agusterodin commented Jan 4, 2023

davidgolden commented Jan 4, 2023 • edited Loading

klarstrup commented Jan 4, 2023

wadehammes commented Jan 6, 2023

arishoham commented Jan 9, 2023

huozhi commented Jan 12, 2023

huozhi commented Jan 12, 2023

davidgolden commented Jan 13, 2023

icekhab commented Feb 3, 2023 • edited Loading

huozhi commented Feb 3, 2023

huozhi commented Nov 7, 2022 •

edited

Loading

ijjk commented Nov 7, 2022 •

edited

Loading

arishoham commented Dec 29, 2022 •

edited

Loading

davidgolden commented Jan 4, 2023 •

edited

Loading

icekhab commented Feb 3, 2023 •

edited

Loading