Fix CSS duplication related problems #50406

shuding · 2023-05-26T21:08:11Z

This PR fixes a couple of categories of CSS issues in App Router, that come from the same root cause.

1. Duplicated styles being loaded in different layers

This issue has been described in vanilla-extract-css/vanilla-extract#1088 (comment). If a CSS module (or a global CSS) is referenced in multiple layers (e.g. a layout and a page), it will be bundled into multiple CSS assets because each layer is considered as a separate entry.

As explained in that issue, we have to bundle all CSS modules into one chunk to avoid a big number of requests.

2. CSS ordering issues (conflicts)

This is likely causing #48120. When the layer-based bundling and ordering logic applies to CSS, it can potentially cause non-deterministic order. In this example, button A in the layout should be in blue. However when button B is imported by the page, button A becomes red. This is an inconsistent experience and can be hard to debug and fix.

ijjk · 2023-05-26T21:53:31Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js shu/10rz	Change
buildDuration	48s	48.2s	⚠️ +181ms
buildDurationCached	10.7s	10.8s	⚠️ +138ms
nodeModulesSize	132 MB	132 MB	⚠️ +21.5 kB
nextStartRea..uration (ms)	412ms	414ms	⚠️ +2ms

Client Bundles (main, webpack) Overall decrease ✓

	vercel/next.js canary	vercel/next.js shu/10rz	Change
0d536507-HASH.js gzip	50.5 kB	50.5 kB	✓
606-HASH.js gzip	24.8 kB	24.8 kB	-1 B
9.HASH.js gzip	180 B	181 B	⚠️ +1 B
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	213 B	210 B	-3 B
main-HASH.js gzip	27.7 kB	27.6 kB	-25 B
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	150 kB	150 kB	-28 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js shu/10rz	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall decrease ✓

	vercel/next.js canary	vercel/next.js shu/10rz	Change
_app-HASH.js gzip	195 B	194 B	-1 B
_error-HASH.js gzip	182 B	182 B	✓
amp-HASH.js gzip	504 B	507 B	⚠️ +3 B
css-HASH.js gzip	320 B	321 B	⚠️ +1 B
dynamic-HASH.js gzip	1.82 kB	1.82 kB	-1 B
edge-ssr-HASH.js gzip	256 B	255 B	-1 B
head-HASH.js gzip	350 B	351 B	⚠️ +1 B
hooks-HASH.js gzip	369 B	368 B	-1 B
image-HASH.js gzip	3.83 kB	3.83 kB	-1 B
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.61 kB	2.61 kB	-2 B
routerDirect..HASH.js gzip	311 B	311 B	✓
script-HASH.js gzip	385 B	385 B	✓
withRouter-HASH.js gzip	309 B	307 B	-2 B
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	11.8 kB	11.8 kB	-4 B

Client Build Manifests

	vercel/next.js canary	vercel/next.js shu/10rz	Change
_buildManifest.js gzip	483 B	483 B	✓
Overall change	483 B	483 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	vercel/next.js shu/10rz	Change
index.html gzip	512 B	513 B	⚠️ +1 B
link.html gzip	525 B	528 B	⚠️ +3 B
withRouter.html gzip	506 B	506 B	✓
Overall change	1.54 kB	1.55 kB	⚠️ +4 B

Edge SSR bundle Size Overall increase ⚠️

	vercel/next.js canary	vercel/next.js shu/10rz	Change
edge-ssr.js gzip	88.3 kB	88.3 kB	⚠️ +10 B
page.js gzip	144 kB	144 kB	⚠️ +8 B
Overall change	232 kB	232 kB	⚠️ +18 B

Middleware size Overall decrease ✓

	vercel/next.js canary	vercel/next.js shu/10rz	Change
middleware-b..fest.js gzip	627 B	624 B	-3 B
middleware-r..fest.js gzip	144 B	145 B	⚠️ +1 B
middleware.js gzip	16.2 kB	16.2 kB	⚠️ +1 B
edge-runtime..pack.js gzip	1.83 kB	1.83 kB	✓
Overall change	18.8 kB	18.8 kB	-1 B

Diffs

Diff for page.js

Diff too large to display

Diff for middleware-b..-manifest.js

@@ -7,96 +7,96 @@ self.__BUILD_MANIFEST = {
     "static/BUILD_ID/_ssgManifest.js",
   ],
   rootMainFiles: [
-    "static/chunks/webpack-aa3032f54a56dedc.js",
-    "static/chunks/0d536507-e8f5f2ca74fbbadf.js",
-    "static/chunks/606-e8066007fc927a2b.js",
-    "static/chunks/main-app-14fe9fcdb48cf4ab.js",
+    "static/chunks/webpack-47553a3eb0f031ba.js",
+    "static/chunks/c9a40420-4bfb41be47fc0950.js",
+    "static/chunks/7-a9d6d41e738f39c7.js",
+    "static/chunks/main-app-e0410b28a4a06b28.js",
   ],
   pages: {
     "/": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
-      "static/chunks/pages/index-73e61f551f6942fb.js",
+      "static/chunks/main-78af9d0443a70acb.js",
+      "static/chunks/pages/index-b27e261de6a98233.js",
     ],
     "/_app": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
-      "static/chunks/pages/_app-4ce47ffa64d5cee5.js",
+      "static/chunks/main-78af9d0443a70acb.js",
+      "static/chunks/pages/_app-9b05656d2c01065f.js",
     ],
     "/_error": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
-      "static/chunks/pages/_error-dc5dba09656e585f.js",
+      "static/chunks/main-78af9d0443a70acb.js",
+      "static/chunks/pages/_error-07e6ce9646113e18.js",
     ],
     "/amp": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
-      "static/chunks/pages/amp-adb784fc8419e472.js",
+      "static/chunks/main-78af9d0443a70acb.js",
+      "static/chunks/pages/amp-5b13834f1a6185c5.js",
     ],
     "/css": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
+      "static/chunks/main-78af9d0443a70acb.js",
       "static/css/94fdbc56eafa2039.css",
-      "static/chunks/pages/css-9c2929f80dffa841.js",
+      "static/chunks/pages/css-a954fe90a591d776.js",
     ],
     "/dynamic": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
-      "static/chunks/pages/dynamic-b04ed3837db75eab.js",
+      "static/chunks/main-78af9d0443a70acb.js",
+      "static/chunks/pages/dynamic-5ec40dd0bfe5c9fe.js",
     ],
     "/edge-ssr": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
-      "static/chunks/pages/edge-ssr-f2aa541ccbb5616e.js",
+      "static/chunks/main-78af9d0443a70acb.js",
+      "static/chunks/pages/edge-ssr-d05e0e6c4b0f8c3c.js",
     ],
     "/head": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
-      "static/chunks/pages/head-e84a0745b30d7800.js",
+      "static/chunks/main-78af9d0443a70acb.js",
+      "static/chunks/pages/head-84516712a41e8774.js",
     ],
     "/hooks": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
-      "static/chunks/pages/hooks-67dc3793196997cf.js",
+      "static/chunks/main-78af9d0443a70acb.js",
+      "static/chunks/pages/hooks-098f77b3140ecce8.js",
     ],
     "/image": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
-      "static/chunks/pages/image-237e8fc3a7bdd8f2.js",
+      "static/chunks/main-78af9d0443a70acb.js",
+      "static/chunks/pages/image-b169e1386bd0843a.js",
     ],
     "/link": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
-      "static/chunks/pages/link-7bb5ea1a5a178db7.js",
+      "static/chunks/main-78af9d0443a70acb.js",
+      "static/chunks/pages/link-313bef9650226604.js",
     ],
     "/routerDirect": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
-      "static/chunks/pages/routerDirect-35dcdb6a65d3b21f.js",
+      "static/chunks/main-78af9d0443a70acb.js",
+      "static/chunks/pages/routerDirect-a4371e7bca96e027.js",
     ],
     "/script": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
-      "static/chunks/pages/script-57c7854259c205b6.js",
+      "static/chunks/main-78af9d0443a70acb.js",
+      "static/chunks/pages/script-eca1edb18604fceb.js",
     ],
     "/withRouter": [
-      "static/chunks/webpack-aa3032f54a56dedc.js",
+      "static/chunks/webpack-47553a3eb0f031ba.js",
       "static/chunks/framework-114cbddc60b679b8.js",
-      "static/chunks/main-b274b697012504b6.js",
-      "static/chunks/pages/withRouter-f375949da3842a3a.js",
+      "static/chunks/main-78af9d0443a70acb.js",
+      "static/chunks/pages/withRouter-05b7dc75b1131bd3.js",
     ],
   },
   ampFirstPages: [],

Diff for middleware-r..-manifest.js

@@ -1,6 +1,6 @@
 self.__REACT_LOADABLE_MANIFEST = {
   "dynamic.js -> ../components/hello": {
-    id: 3009,
-    files: ["static/chunks/9.61b34194ea8a102b.js"],
+    id: 3270,
+    files: ["static/chunks/270.21df5c6d1503180b.js"],
   },
 };

Diff for middleware.js

@@ -2,7 +2,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [826],
   {
-    /***/ 9885: /***/ (
+    /***/ 9045: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -15,7 +15,7 @@
       __webpack_require__.d(__webpack_exports__, {
         default: () =>
           /* binding */ next_middleware_loaderabsolutePagePath_private_next_root_dir_2Fmiddleware_js_page_2Fmiddleware_rootDir_2Ftmp_2Fnext_statskQP2jL_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 }) {
@@ -44,8 +44,8 @@
         }
       } //# sourceMappingURL=error.js.map
 
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/utils.js
-      var utils = __webpack_require__(6922); // 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
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/utils.js
+      var utils = __webpack_require__(972); // 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
       const responseSymbol = Symbol("response");
       const passThroughSymbol = Symbol("passThrough");
       const waitUntilSymbol = Symbol("waitUntil");
@@ -92,10 +92,10 @@
         }
       } //# sourceMappingURL=fetch-event.js.map
 
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/next-url.js + 12 modules
-      var next_url = __webpack_require__(7200);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/cookies.js
-      var cookies = __webpack_require__(7235); // 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
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/next-url.js + 12 modules
+      var next_url = __webpack_require__(7676);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/cookies.js
+      var cookies = __webpack_require__(8287); // 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
       const INTERNALS = Symbol("internal request");
       class NextRequest extends Request {
         constructor(input, init = {}) {
@@ -173,8 +173,8 @@
         }
       } //# sourceMappingURL=request.js.map
 
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/response.js
-      var spec_extension_response = __webpack_require__(900); // 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
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/response.js
+      var spec_extension_response = __webpack_require__(4486); // 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
       /**
        * Given a URL as a string and a base URL it will make the URL relative
        * if the parsed protocol and host is the same as the one in the base
@@ -186,7 +186,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",
@@ -211,7 +211,7 @@
           }
         }
         return searchParams;
-      } //# sourceMappingURL=internal-utils.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/app-paths.js
+      } //# sourceMappingURL=internal-utils.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/app-paths.js
 
       /**
        * Normalizes an app route so it represents the actual request path. Essentially
@@ -262,7 +262,7 @@
        * Since this function is used on full urls it checks `?` for searchParams handling.
        */ function normalizeRscPath(pathname, enabled) {
         return enabled ? pathname.replace(/\.rsc($|\?)/, "$1") : 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 ACTION = "Next-Action";
@@ -277,7 +277,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/lib/constants.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/lib/constants.js
 
       const NEXT_QUERY_PARAM_PREFIX = "nxtP";
       const PRERENDER_REVALIDATE_HEADER = "x-prerender-revalidate";
@@ -377,7 +377,7 @@
       const WEBPACK_RESOURCE_QUERIES = {
         edgeSSREntry: "__next_edge_ssr_entry__",
         metadata: "__next_metadata__",
-      }; //# sourceMappingURL=constants.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=constants.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) {
@@ -676,11 +676,11 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         });
         // Eagerly fire instrumentation hook to make the startup faster.
         void ensureInstrumentationRegistered();
-      } //# sourceMappingURL=adapter.js.map // 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-statskQP2jL%2Fstats-app&matchers=!
+      } //# sourceMappingURL=adapter.js.map // 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-statskQP2jL%2Fstats-app&matchers=!
 
       enhanceGlobals();
 
-      var mod = __webpack_require__(5484);
+      var mod = __webpack_require__(8504);
       var handler = mod.middleware || mod.default;
 
       if (typeof handler !== "function") {
@@ -702,7 +702,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 5484: /***/ (
+    /***/ 8504: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -716,8 +716,8 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         default: () => /* binding */ middleware,
       });
 
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/response.js
-      var response = __webpack_require__(900); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/exports/next-response.js // CONCATENATED MODULE: ./middleware.js
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/spec-extension/response.js
+      var response = __webpack_require__(4486); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/esm/server/web/exports/next-response.js // CONCATENATED MODULE: ./middleware.js
       // This file is for modularized imports for next/server to get fully-treeshaking.
       //# sourceMappingURL=next-response.js.map
 
@@ -729,7 +729,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 2537: /***/ (module) => {
+    /***/ 1960: /***/ (module) => {
       "use strict";
 
       var __defProp = Object.defineProperty;
@@ -1095,7 +1095,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 7200: /***/ (
+    /***/ 7676: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -1105,7 +1105,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       // EXPORTS
       __webpack_require__.d(__webpack_exports__, {
         c: () => /* binding */ NextURL,
-      }); // 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
 
       function detectDomainLocale(domainItems, hostname, detectedLocale) {
         if (!domainItems) return;
@@ -1131,7 +1131,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
             return item;
           }
         }
-      } //# 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
@@ -1141,7 +1141,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
        *   - `/` -> `/`
        */ 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
@@ -1169,7 +1169,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
           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
@@ -1180,7 +1180,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         }
         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
@@ -1192,7 +1192,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         }
         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
@@ -1206,7 +1206,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         }
         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
@@ -1225,7 +1225,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         }
         // Add the locale prefix to the path.
         return addPathPrefix(path, "/" + locale);
-      } //# 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(
@@ -1249,7 +1249,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
             ? 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
@@ -1269,7 +1269,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
           hostname = parsed.hostname;
         } else return;
         return hostname.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
@@ -1299,7 +1299,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
           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
@@ -1333,7 +1333,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         // If the path without the prefix doesn't start with a `/` we need to add it
         // back to the path to make sure it's a valid path.
         return "/" + withoutPrefix;
-      } //# 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 _options_nextConfig;
@@ -1384,7 +1384,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
               : 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)/;
@@ -1614,7 +1614,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 7235: /***/ (
+    /***/ 8287: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -1628,7 +1628,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         /* harmony export */
       });
       /* harmony import */ var next_dist_compiled_edge_runtime_cookies__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(2537);
+        __webpack_require__(1960);
       /* harmony import */ var next_dist_compiled_edge_runtime_cookies__WEBPACK_IMPORTED_MODULE_0___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_dist_compiled_edge_runtime_cookies__WEBPACK_IMPORTED_MODULE_0__
@@ -1638,7 +1638,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 900: /***/ (
+    /***/ 4486: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -1649,11 +1649,11 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
         /* harmony export */
       });
       /* harmony import */ var _next_url__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(7200);
+        __webpack_require__(7676);
       /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ =
-        __webpack_require__(6922);
+        __webpack_require__(972);
       /* harmony import */ var _cookies__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(7235);
+        __webpack_require__(8287);
 
       const INTERNALS = Symbol("internal response");
       const REDIRECTS = new Set([301, 302, 303, 307, 308]);
@@ -1774,7 +1774,7 @@ Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`;
       /***/
     },
 
-    /***/ 6922: /***/ (
+    /***/ 972: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -1930,7 +1930,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__(9885);
+    /******/ var __webpack_exports__ = __webpack_exec__(9045);
     /******/ (_ENTRIES =
       typeof _ENTRIES === "undefined" ? {} : _ENTRIES).middleware_middleware =
       __webpack_exports__;

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-73e61f551f6942fb.js"],
-  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-dc5dba09656e585f.js"],
-  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-adb784fc8419e472.js"],
+  "/": ["static\u002Fchunks\u002Fpages\u002Findex-b27e261de6a98233.js"],
+  "/_error": ["static\u002Fchunks\u002Fpages\u002F_error-07e6ce9646113e18.js"],
+  "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-5b13834f1a6185c5.js"],
   "/css": [
     "static\u002Fcss\u002F94fdbc56eafa2039.css",
-    "static\u002Fchunks\u002Fpages\u002Fcss-9c2929f80dffa841.js",
+    "static\u002Fchunks\u002Fpages\u002Fcss-a954fe90a591d776.js",
   ],
   "/dynamic": [
-    "static\u002Fchunks\u002Fpages\u002Fdynamic-b04ed3837db75eab.js",
+    "static\u002Fchunks\u002Fpages\u002Fdynamic-5ec40dd0bfe5c9fe.js",
   ],
   "/edge-ssr": [
-    "static\u002Fchunks\u002Fpages\u002Fedge-ssr-f2aa541ccbb5616e.js",
+    "static\u002Fchunks\u002Fpages\u002Fedge-ssr-d05e0e6c4b0f8c3c.js",
   ],
-  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-e84a0745b30d7800.js"],
-  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-67dc3793196997cf.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-237e8fc3a7bdd8f2.js"],
-  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-7bb5ea1a5a178db7.js"],
+  "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-84516712a41e8774.js"],
+  "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-098f77b3140ecce8.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-b169e1386bd0843a.js"],
+  "/link": ["static\u002Fchunks\u002Fpages\u002Flink-313bef9650226604.js"],
   "/routerDirect": [
-    "static\u002Fchunks\u002Fpages\u002FrouterDirect-35dcdb6a65d3b21f.js",
+    "static\u002Fchunks\u002Fpages\u002FrouterDirect-a4371e7bca96e027.js",
   ],
-  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-57c7854259c205b6.js"],
+  "/script": ["static\u002Fchunks\u002Fpages\u002Fscript-eca1edb18604fceb.js"],
   "/withRouter": [
-    "static\u002Fchunks\u002Fpages\u002FwithRouter-f375949da3842a3a.js",
+    "static\u002Fchunks\u002Fpages\u002FwithRouter-05b7dc75b1131bd3.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__(4943);
+          return __webpack_require__(7174);
         },
       ]);
       if (false) {
@@ -24,7 +24,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 179], function () {
-      return __webpack_exec__(3115), __webpack_exec__(3985);
+      return __webpack_exec__(1113), __webpack_exec__(688);
     });
     /******/ 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__(8567);
+          return __webpack_require__(9911);
         },
       ]);
       if (false) {
@@ -24,7 +24,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 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__(4660);
+      module.exports = __webpack_require__(4487);
 
       /***/
     },
 
-    /***/ 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__(6624);
+          return __webpack_require__(6539);
         },
       ]);
       if (false) {
@@ -28,7 +28,7 @@
       /***/
     },
 
-    /***/ 4660: /***/ function (module, exports, __webpack_require__) {
+    /***/ 4487: /***/ function (module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -44,8 +44,8 @@
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(959)
       );
-      const _ampcontext = __webpack_require__(382);
-      const _ampmode = __webpack_require__(2961);
+      const _ampcontext = __webpack_require__(2882);
+      const _ampmode = __webpack_require__(7069);
       function useAmp() {
         // Don't assign the context value to a variable to save bytes
         return (0, _ampmode.isInAmpMode)(
@@ -67,7 +67,7 @@
       /***/
     },
 
-    /***/ 6624: /***/ function (
+    /***/ 6539: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -84,7 +84,7 @@
         /* harmony export */
       });
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(8510);
+        __webpack_require__(8753);
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_amp__WEBPACK_IMPORTED_MODULE_0__
@@ -108,7 +108,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 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__(1234);
+          return __webpack_require__(8045);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 1234: /***/ function (
+    /***/ 8045: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -28,7 +28,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(1355);
+        __webpack_require__(1044);
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -48,7 +48,7 @@
       /***/
     },
 
-    /***/ 1355: /***/ function (module) {
+    /***/ 1044: /***/ function (module) {
       // extracted by mini-css-extract-plugin
       module.exports = { helloWorld: "css_helloWorld__qqNwY" };
 
@@ -61,7 +61,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 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__(3660);
+          return __webpack_require__(1802);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 8988: /***/ function (module, exports, __webpack_require__) {
+    /***/ 2406: /***/ function (module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -45,7 +45,7 @@
         __webpack_require__(959)
       );
       const _loadable = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3262)
+        __webpack_require__(4114)
       );
       const isServerSide = "object" === "undefined";
       // Normalize loader to return the module as form { default: Component } for `React.lazy`.
@@ -146,7 +146,7 @@
       /***/
     },
 
-    /***/ 1343: /***/ function (
+    /***/ 795: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -173,7 +173,7 @@
       /***/
     },
 
-    /***/ 3262: /***/ function (
+    /***/ 4114: /***/ function (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -215,7 +215,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(959)
       );
-      const _loadablecontext = __webpack_require__(1343);
+      const _loadablecontext = __webpack_require__(795);
       function resolve(obj) {
         return obj && obj.default ? obj.default : obj;
       }
@@ -450,7 +450,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /***/
     },
 
-    /***/ 3660: /***/ function (
+    /***/ 1802: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -466,7 +466,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(6113);
+        __webpack_require__(2677);
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_dynamic__WEBPACK_IMPORTED_MODULE_1__
@@ -475,11 +475,11 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       const DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
         () =>
           __webpack_require__
-            .e(/* import() */ 9)
-            .then(__webpack_require__.bind(__webpack_require__, 3009)),
+            .e(/* import() */ 270)
+            .then(__webpack_require__.bind(__webpack_require__, 3270)),
         {
           loadableGenerated: {
-            webpack: () => [/*require.resolve*/ 3009],
+            webpack: () => [/*require.resolve*/ 3270],
           },
         }
       );
@@ -506,12 +506,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /***/
     },
 
-    /***/ 6113: /***/ function (
+    /***/ 2677: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(8988);
+      module.exports = __webpack_require__(2406);
 
       /***/
     },
@@ -522,7 +522,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(3995);
+      return __webpack_exec__(7753);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for edge-ssr-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [800],
   {
-    /***/ 6219: /***/ function (
+    /***/ 6027: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/edge-ssr",
         function () {
-          return __webpack_require__(3114);
+          return __webpack_require__(7338);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 3114: /***/ function (
+    /***/ 7338: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -48,7 +48,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function () {
-      return __webpack_exec__(6219);
+      return __webpack_exec__(6027);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for head-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [645],
   {
-    /***/ 2899: /***/ function (
+    /***/ 6955: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/head",
         function () {
-          return __webpack_require__(6279);
+          return __webpack_require__(9343);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 6279: /***/ function (
+    /***/ 9343: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -34,7 +34,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(8412);
+        __webpack_require__(9046);
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_head__WEBPACK_IMPORTED_MODULE_1__
@@ -68,12 +68,12 @@
       /***/
     },
 
-    /***/ 8412: /***/ function (
+    /***/ 9046: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(7305);
+      module.exports = __webpack_require__(3590);
 
       /***/
     },
@@ -84,7 +84,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(2899);
+      return __webpack_exec__(6955);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for hooks-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [757],
   {
-    /***/ 2304: /***/ function (
+    /***/ 7819: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/hooks",
         function () {
-          return __webpack_require__(8313);
+          return __webpack_require__(1780);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 8313: /***/ function (
+    /***/ 1780: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -79,7 +79,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(2304);
+      return __webpack_exec__(7819);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [358],
   {
-    /***/ 5885: /***/ function (
+    /***/ 801: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(8931);
+          return __webpack_require__(974);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 3655: /***/ function (module, exports, __webpack_require__) {
+    /***/ 997: /***/ function (module, exports, __webpack_require__) {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -36,14 +36,14 @@
         __webpack_require__(959)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(7305)
+        __webpack_require__(3590)
       );
-      const _imageblursvg = __webpack_require__(8700);
-      const _imageconfig = __webpack_require__(2975);
-      const _imageconfigcontext = __webpack_require__(8415);
-      const _warnonce = __webpack_require__(717);
+      const _imageblursvg = __webpack_require__(2185);
+      const _imageconfig = __webpack_require__(4115);
+      const _imageconfigcontext = __webpack_require__(2111);
+      const _warnonce = __webpack_require__(6941);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(2019)
+        __webpack_require__(3719)
       );
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -669,7 +669,7 @@
       /***/
     },
 
-    /***/ 8700: /***/ function (__unused_webpack_module, exports) {
+    /***/ 2185: /***/ function (__unused_webpack_module, exports) {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -731,7 +731,7 @@
       /***/
     },
 
-    /***/ 2019: /***/ function (__unused_webpack_module, exports) {
+    /***/ 3719: /***/ function (__unused_webpack_module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -765,7 +765,7 @@
       /***/
     },
 
-    /***/ 8931: /***/ function (
+    /***/ 974: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -786,8 +786,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1527);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/image.js
-      var next_image = __webpack_require__(3960);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_biqbaboplfbrettd7655fr4n2y/node_modules/next/image.js
+      var next_image = __webpack_require__(8249);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ var nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -817,12 +817,12 @@
       /***/
     },
 
-    /***/ 3960: /***/ function (
+    /***/ 8249: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3655);
+      module.exports = __webpack_require__(997);
 
       /***/
     },
@@ -833,7 +833,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(5885);
+      return __webpack_exec__(801);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for index-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [405],
   {
-    /***/ 3558: /***/ function (
+    /***/ 6481: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/",
         function () {
-          return __webpack_require__(5241);
+          return __webpack_require__(853);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 5241: /***/ function (
+    /***/ 853: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -44,7 +44,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [888, 774, 179], function () {
-      return __webpack_exec__(3558);
+      return __webpack_exec__(6481);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for link-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [644],
   {
-    /***/ 8662: /***/ function (
+    /***/ 7014: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/link",
         function () {
-          return __webpack_require__(1488);
+          return __webpack_require__(1509);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 6994: /***/ function (module, exports) {
+    /***/ 7191: /***/ function (module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -86,7 +86,7 @@
       /***/
     },
 
-    /***/ 1310: /***/ function (module, exports) {
+    /***/ 5578: /***/ function (module, exports) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -121,7 +121,7 @@
       /***/
     },
 
-    /***/ 9213: /***/ function (module, exports, __webpack_require__) {
+    /***/ 3416: /***/ function (module, exports, __webpack_require__) {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -137,17 +137,17 @@
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(959)
       );
-      const _resolvehref = __webpack_require__(5453);
-      const _islocalurl = __webpack_require__(8293);
-      const _formaturl = __webpack_require__(9064);
-      const _utils = __webpack_require__(800);
-      const _addlocale = __webpack_require__(2621);
-      const _routercontext = __webpack_require__(3490);
-      const _approutercontext = __webpack_require__(4822);
-      const _useintersection = __webpack_require__(3261);
-      const _getdomainlocale = __webpack_require__(1310);
-      const _addbasepath = __webpack_require__(9747);
-      const _routerreducertypes = __webpack_require__(6994);
+      const _resolvehref = __webpack_require__(6336);
+      const _islocalurl = __webpack_require__(1087);
+      const _formaturl = __webpack_require__(4574);
+      const _utils = __webpack_require__(161);
+      const _addlocale = __webpack_require__(3144);
+      const _routercontext = __webpack_require__(5113);
+      const _approutercontext = __webpack_require__(8585);
+      const _useintersection = __webpack_require__(3922);
+      const _getdomainlocale = __webpack_require__(5578);
+      const _addbasepath = __webpack_require__(6376);
+      const _routerreducertypes = __webpack_require__(7191);
       const prefetched = new Set();
       function prefetch(router, href, as, options, appOptions, isAppRouter) {
         if (false) {
@@ -561,7 +561,7 @@
       /***/
     },
 
-    /***/ 3261: /***/ function (module, exports, __webpack_require__) {
+    /***/ 3922: /***/ function (module, exports, __webpack_require__) {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -574,7 +574,7 @@
         },
       });
       const _react = __webpack_require__(959);
-      const _requestidlecallback = __webpack_require__(9839);
+      const _requestidlecallback = __webpack_require__(4124);
       const hasIntersectionObserver =
         typeof IntersectionObserver === "function";
       const observers = new Map();
@@ -687,7 +687,7 @@
       /***/
     },
 
-    /***/ 1488: /***/ function (
+    /***/ 1509: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -703,7 +703,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(4595);
+        __webpack_require__(9495);
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_link__WEBPACK_IMPORTED_MODULE_1__
@@ -734,12 +734,12 @@
       /***/
     },
 
-    /***/ 4595: /***/ function (
+    /***/ 9495: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(9213);
+      module.exports = __webpack_require__(3416);
 
       /***/
     },
@@ -750,7 +750,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(8662);
+      return __webpack_exec__(7014);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for routerDirect-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [58],
   {
-    /***/ 2188: /***/ function (
+    /***/ 7288: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/routerDirect",
         function () {
-          return __webpack_require__(3961);
+          return __webpack_require__(9003);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 3961: /***/ function (
+    /***/ 9003: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -34,7 +34,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(5866);
+        __webpack_require__(5664);
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_router__WEBPACK_IMPORTED_MODULE_1__
@@ -54,12 +54,12 @@
       /***/
     },
 
-    /***/ 5866: /***/ function (
+    /***/ 5664: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3985);
+      module.exports = __webpack_require__(688);
 
       /***/
     },
@@ -70,7 +70,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __webpack_exec__(2188);
+      return __webpack_exec__(7288);
     });
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for script-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [797],
   {
-    /***/ 1136: /***/ function (
+    /***/ 6695: /***/ function (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/script",
         function () {
-          return __webpack_require__(8563);
+          return __webpack_require__(8113);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 8563: /***/ function (
+    /***/ 8113: /***/ function (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -34,7 +34,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(1527);
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(9096);
+        __webpack_require__(6071);
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_script__WEBPACK_IMPORTED_MODULE_1__
@@ -67,12 +67,12 @@
       /***/
     },
 
-    /***/ 9096: /***/ function (
+    /***/ 6071: /***/ function (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) {
-      module.exports = __webpack_require__(3507);
+      module.exports = __webpack_require__(4821);
 
       /***/
     },
@@ -83,7 +83,7 @@
       return __webpack_require__((__webpack_require__.s = moduleId));
     };
     /******/ __webpack_require__.O(0, [774, 888, 179], function () {
-      return __
Post job cleanup.
[command]/usr/bin/git version
git version 2.40.1
Temporarily overriding HOME='/home/runner/work/_temp/e15ff2e2-c026-4bf1-ba13-55fd839a59c5' 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 sh -c "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 sh -c "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: aff340c25cd4cf4abdf8283319020905d3791029

ssijak · 2023-06-09T08:52:15Z

Hey @shuding I'm using vanilla extract for styling, importing my component library in a monorepo and transpiling that UI package in Next. Although this PR seems to fix CSS ordering somewhat in next dev mode, duplication is not fixed and after building the app, ordering is also not good.
How can people help with this issues? Styling is pretty broken with the /app dir right now for a lot of libraries

shuding · 2023-06-09T09:06:38Z

@ssijak Would you mind opening a new issue?

ssijak · 2023-06-09T12:27:24Z

@shuding here: #51030

shuding · 2023-06-09T12:28:27Z

Thanks!

This PR fixes a couple of categories of CSS issues in App Router, that come from the same root cause. ### 1. Duplicated styles being loaded in different layers This issue has been described in vanilla-extract-css/vanilla-extract#1088 (comment). If a CSS module (or a global CSS) is referenced in multiple layers (e.g. a layout and a page), it will be bundled into multiple CSS assets because each layer is considered as a separate entry. <img width="1141" alt="CleanShot-2023-05-26-GoB9Rhcs@2x" src="https://github.com/vercel/next.js/assets/3676859/8e0f5346-ee64-4553-950a-7fb44f769efc"> As explained in that issue, we have to bundle all CSS modules into one chunk to avoid a big number of requests. ### 2. CSS ordering issues (conflicts) This is likely causing vercel#48120. When the layer-based bundling and ordering logic applies to CSS, it can potentially cause non-deterministic order. In this example, button A in the layout should be in blue. However when button B is imported by the page, button A becomes red. This is an inconsistent experience and can be hard to debug and fix. <img width="1090" alt="CleanShot-2023-05-26-Ar4MN5rP@2x" src="https://github.com/vercel/next.js/assets/3676859/4328d5d7-23af-4c42-bedf-30f8f062d96a">

tinleym · 2023-06-14T18:46:58Z

Going from 13.4.4 -> 13.4.5 jumbles the defined precedence order of my CSS Cascade Layers. My guess is it has something to do with the changes here?

I'm importing a plain css file in the global layout that defines the layer precedence order, and elsewhere CSS modules that use the layers.

Remove the Server CSS manifest and related logic, and use the chunkGroup CSS files instead for each entry to inject stylesheet links. Why was that manifest needed in the first place? When implementing CSS collection for RSC and nested layout initially, we collect CSS imports at each layer and create corresponding client entries. But then soon got hit by the problem of duplication and improper tree-shaking. Two layers can have the same CSS imported so we solved it in a way that "if an upper layer imports this module, skip it in child layers". Note that this is deduped by module, so we need to keep the information of "layer (entry) → CSS modules" somewhere, in a manifest. Another reason is that we create the client entry before Webpack optimizes modules, so we can inject the client entry into the same compilation. But that means the collected client modules from the server layer are not properly optimized (DCE). **This is a general issue at the moment that's not specifically related to CSS, although using that manifest to collect DCE'd info and join the original collected CSS files with that info temporarily solved it.** That's why I disabled some tests related to font CSS collection and want to improve it in a more general way. Why is that not needed anymore? Main reason is to keep a good balance between duplication and number of chunks, and delegate the decision to Webpack's splitChunks plugin. It is not possible to get to a point of 0 duplication unless we ship every CSS module as a single chunk. And since in #50406 we made the duplication better but at the chunk asset level, instead of the original module level. Prior work: #50406, #50610.

shuding · 2023-06-15T01:12:58Z

#51018 should make it improved further 🎉

igordanchenko · 2023-06-20T14:00:57Z

@shuding unfortunately, CSS modules are still working unpredictably in the latest canary (13.4.7-canary.1)

Same styles are imported multiple times
The order of imports is not deterministic

I believe #51030 sums it up, but here is a minimal repro with easy-to-reproduce test cases.

https://codesandbox.io/p/sandbox/eloquent-maria-hlj722?file=%2Fapp%2Fpage.tsx

shuding added 3 commits May 26, 2023 22:35

fix css duplication problems

75857c2

fix inheritance

6260b1e

fix

aff340c

ijjk added area: tests created-by: Next.js team PRs by the Next.js team type: next labels May 26, 2023

shuding marked this pull request as ready for review May 26, 2023 21:39

shuding requested review from timneutkens, ijjk, a team, huozhi and feedthejim as code owners May 26, 2023 21:39

shuding mentioned this pull request May 29, 2023

Shared CSS is bundled multiple times with App Router in Next vanilla-extract-css/vanilla-extract#1088

Open

2 tasks

timneutkens approved these changes May 30, 2023

View reviewed changes

timneutkens merged commit 470e48c into canary May 30, 2023
121 checks passed

timneutkens deleted the shu/10rz branch May 30, 2023 11:55

ssijak mentioned this pull request Jun 9, 2023

[NEXT-1308] Css is imported multiple times and out of order in /app dir #51030

Open

1 task

shuding mentioned this pull request Jun 9, 2023

Simplify server CSS handling #51018

Merged

github-actions bot added the locked label Jul 21, 2023

github-actions bot locked as resolved and limited conversation to collaborators Jul 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix CSS duplication related problems #50406

Fix CSS duplication related problems #50406

shuding commented May 26, 2023

ijjk commented May 26, 2023

Diffs

ssijak commented Jun 9, 2023

shuding commented Jun 9, 2023

ssijak commented Jun 9, 2023

shuding commented Jun 9, 2023

tinleym commented Jun 14, 2023

shuding commented Jun 15, 2023

igordanchenko commented Jun 20, 2023

Fix CSS duplication related problems #50406

Fix CSS duplication related problems #50406

Conversation

shuding commented May 26, 2023

1. Duplicated styles being loaded in different layers

2. CSS ordering issues (conflicts)

ijjk commented May 26, 2023

Stats from current PR

Diffs

ssijak commented Jun 9, 2023

shuding commented Jun 9, 2023

ssijak commented Jun 9, 2023

shuding commented Jun 9, 2023

tinleym commented Jun 14, 2023

shuding commented Jun 15, 2023

igordanchenko commented Jun 20, 2023