KEMBAR78
Enable anonymous function naming in React Compiler by eps1lon · Pull Request #84070 · vercel/next.js · GitHub
Skip to content

Conversation

@eps1lon
Copy link
Member

@eps1lon eps1lon commented Sep 22, 2025

Enables the React Compiler's heuristic for naming anonymous functions in Effects etc. We already apply our own if the Compiler is disabled but those heuristics have no effect once the Compiler is applied.

Once the React Compiler becomes the default, we can remove our custom heuristics.

Closes https://linear.app/vercel/issue/NAR-301/

Copy link
Member Author

eps1lon commented Sep 22, 2025

@ijjk
Copy link
Member

ijjk commented Sep 22, 2025

Failing test suites

Commit: 592b4dd | About building and testing Next.js

pnpm test test/integration/app-dir-export/test/dynamic-missing-gsp-dev.test.ts

  • app dir - with output export - dynamic missing gsp dev > development mode > should error when dynamic route is missing generateStaticParams (DD)
  • app dir - with output export - dynamic missing gsp dev > development mode > should error when dynamic route is set to true (DD)
  • app dir - with output export - dynamic missing gsp dev > development mode > should error when client component has generateStaticParams (DD)
Expand output

● app dir - with output export - dynamic missing gsp dev › development mode › should error when dynamic route is missing generateStaticParams

page.goto: net::ERR_CONNECTION_RESET at http://localhost:41405/another/first
Call log:
  - navigating to "http://localhost:41405/another/first", waiting until "load"

  335 |     await opts?.beforePageLoad?.(page)
  336 |
> 337 |     await page.goto(url, { waitUntil: opts?.waitUntil ?? 'load' })
      |                ^
  338 |   }
  339 |
  340 |   back(options?: Parameters<Page['goBack']>[0]) {

  at Playwright.goto (lib/browsers/playwright.ts:337:16)
  at webdriver (lib/next-webdriver.ts:151:3)
  at runTests (integration/app-dir-export/test/utils.ts:183:25)
  at Object.<anonymous> (integration/app-dir-export/test/dynamic-missing-gsp-dev.test.ts:8:9)

● app dir - with output export - dynamic missing gsp dev › development mode › should error when dynamic route is set to true

page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:40131/another/first
Call log:
  - navigating to "http://localhost:40131/another/first", waiting until "load"

  335 |     await opts?.beforePageLoad?.(page)
  336 |
> 337 |     await page.goto(url, { waitUntil: opts?.waitUntil ?? 'load' })
      |                ^
  338 |   }
  339 |
  340 |   back(options?: Parameters<Page['goBack']>[0]) {

  at Playwright.goto (lib/browsers/playwright.ts:337:16)
  at webdriver (lib/next-webdriver.ts:151:3)
  at runTests (integration/app-dir-export/test/utils.ts:183:25)
  at Object.<anonymous> (integration/app-dir-export/test/dynamic-missing-gsp-dev.test.ts:18:9)

● app dir - with output export - dynamic missing gsp dev › development mode › should error when client component has generateStaticParams

page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:36583/another/first
Call log:
  - navigating to "http://localhost:36583/another/first", waiting until "load"

  335 |     await opts?.beforePageLoad?.(page)
  336 |
> 337 |     await page.goto(url, { waitUntil: opts?.waitUntil ?? 'load' })
      |                ^
  338 |   }
  339 |
  340 |   back(options?: Parameters<Page['goBack']>[0]) {

  at Playwright.goto (lib/browsers/playwright.ts:337:16)
  at webdriver (lib/next-webdriver.ts:151:3)
  at runTests (integration/app-dir-export/test/utils.ts:183:25)
  at Object.<anonymous> (integration/app-dir-export/test/dynamic-missing-gsp-dev.test.ts:31:9)

pnpm test test/integration/next-image-new/default/test/static.test.ts (turbopack)

  • Static Image Component Tests > development mode > Should allow an image with a static src to omit height and width (DD)
Expand output

● Static Image Component Tests › development mode › Should allow an image with a static src to omit height and width

page.waitForSelector: Timeout 5000ms exceeded.
Call log:
  - waiting for locator('#basic-static') to be visible

  511 |
  512 |     return this.startChain(async () => {
> 513 |       const el = await page.waitForSelector(selector, {
      |                             ^
  514 |         timeout,
  515 |         state,
  516 |       })

  at waitForSelector (lib/browsers/playwright.ts:513:29)
  at Playwright._chain (lib/browsers/playwright.ts:643:23)
  at Playwright._chain [as startChain] (lib/browsers/playwright.ts:624:17)
  at Playwright.startChain [as waitForElementByCss] (lib/browsers/playwright.ts:512:17)
  at Playwright.waitForElementByCss [as elementByCss] (lib/browsers/playwright.ts:397:17)
  at Playwright.elementByCss [as elementById] (lib/browsers/playwright.ts:417:17)
  at Object.elementById (integration/next-image-new/default/test/static.test.ts:26:26)

pnpm test-dev test/e2e/app-dir/cache-components-allow-otel-spans/cache-components-allow-otel-spans.test.ts

  • hello-world > should allow creating spans during cache component validation without triggering sync IO bailouts - inside a Cache Component - without prerendering the page (DD)
  • hello-world > should allow creating spans during cache component validation without triggering sync IO bailouts - inside a Cache Component - with prerendering the page (DD)
  • hello-world > should allow creating spans during cache component validation without triggering sync IO bailouts - inside a Server Component - without prerendering the page (DD)
  • hello-world > should allow creating spans during cache component validation without triggering sync IO bailouts - inside a Server Component - with prerendering the page (DD)
Expand output

● hello-world › should allow creating spans during cache component validation without triggering sync IO bailouts - inside a Cache Component - without prerendering the page

Failed to start server after 10000ms, waiting for this log pattern: / ✓ Ready in /

  432 |     return setTimeout(() => {
  433 |       reject(
> 434 |         new Error(
      |         ^
  435 |           `Failed to start server after ${ms}ms, waiting for this log pattern: ${this.serverReadyPattern}`
  436 |         )
  437 |       )

  at Timeout._onTimeout (lib/next-modes/base.ts:434:9)

● hello-world › should allow creating spans during cache component validation without triggering sync IO bailouts - inside a Cache Component - with prerendering the page

Failed to start server after 10000ms, waiting for this log pattern: / ✓ Ready in /

  432 |     return setTimeout(() => {
  433 |       reject(
> 434 |         new Error(
      |         ^
  435 |           `Failed to start server after ${ms}ms, waiting for this log pattern: ${this.serverReadyPattern}`
  436 |         )
  437 |       )

  at Timeout._onTimeout (lib/next-modes/base.ts:434:9)

● hello-world › should allow creating spans during cache component validation without triggering sync IO bailouts - inside a Server Component - without prerendering the page

Failed to start server after 10000ms, waiting for this log pattern: / ✓ Ready in /

  432 |     return setTimeout(() => {
  433 |       reject(
> 434 |         new Error(
      |         ^
  435 |           `Failed to start server after ${ms}ms, waiting for this log pattern: ${this.serverReadyPattern}`
  436 |         )
  437 |       )

  at Timeout._onTimeout (lib/next-modes/base.ts:434:9)

● hello-world › should allow creating spans during cache component validation without triggering sync IO bailouts - inside a Server Component - with prerendering the page

Failed to start server after 10000ms, waiting for this log pattern: / ✓ Ready in /

  432 |     return setTimeout(() => {
  433 |       reject(
> 434 |         new Error(
      |         ^
  435 |           `Failed to start server after ${ms}ms, waiting for this log pattern: ${this.serverReadyPattern}`
  436 |         )
  437 |       )

  at Timeout._onTimeout (lib/next-modes/base.ts:434:9)

@eps1lon eps1lon changed the base branch from sebbie/09-22-flag_excess_properties_in_next.js_config_with_typescript to graphite-base/84070 September 22, 2025 10:55
@eps1lon eps1lon force-pushed the sebbie/09-21-enable_anonymous_function_naming_in_react_compiler branch from afa2304 to fb0fb41 Compare September 22, 2025 10:55
@eps1lon eps1lon force-pushed the graphite-base/84070 branch from 6d8125f to 9d0ab60 Compare September 22, 2025 10:55
@eps1lon eps1lon changed the base branch from graphite-base/84070 to sebbie/09-22-_turbopack_ensure_react_compiler_options_are_based_dev_vs_prod September 22, 2025 10:55
@ijjk
Copy link
Member

ijjk commented Sep 22, 2025

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js sebbie/09-21-enable_anonymous_function_naming_in_react_compiler Change
buildDuration 20.6s 17.5s N/A
buildDurationCached 16.7s 13.6s N/A
nodeModulesSize 453 MB 453 MB ⚠️ +1.94 kB
nextStartRea..uration (ms) 728ms 671ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js sebbie/09-21-enable_anonymous_function_naming_in_react_compiler Change
234bef07-HASH.js gzip 54.8 kB 54.8 kB N/A
3414-HASH.js gzip 4.32 kB 4.32 kB N/A
5194.HASH.js gzip 169 B 169 B
8863-HASH.js gzip 5.32 kB 5.32 kB N/A
9304-HASH.js gzip 46.6 kB 46 kB N/A
framework-HASH.js gzip 57.7 kB 57.7 kB N/A
main-app-HASH.js gzip 260 B 257 B N/A
main-HASH.js gzip 37 kB 36.8 kB N/A
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 169 B 169 B
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js sebbie/09-21-enable_anonymous_function_naming_in_react_compiler Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB
Overall change 39.4 kB 39.4 kB
Client Pages
vercel/next.js canary vercel/next.js sebbie/09-21-enable_anonymous_function_naming_in_react_compiler Change
_app-HASH.js gzip 194 B 193 B N/A
_error-HASH.js gzip 182 B 182 B
amp-HASH.js gzip 502 B 507 B N/A
css-HASH.js gzip 335 B 333 B N/A
dynamic-HASH.js gzip 1.83 kB 1.83 kB N/A
edge-ssr-HASH.js gzip 255 B 255 B
head-HASH.js gzip 350 B 352 B N/A
hooks-HASH.js gzip 385 B 383 B N/A
image-HASH.js gzip 581 B 580 B N/A
index-HASH.js gzip 257 B 259 B N/A
link-HASH.js gzip 2.29 kB 2.29 kB N/A
routerDirect..HASH.js gzip 320 B 318 B N/A
script-HASH.js gzip 387 B 386 B N/A
withRouter-HASH.js gzip 315 B 313 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 543 B 543 B
Client Build Manifests
vercel/next.js canary vercel/next.js sebbie/09-21-enable_anonymous_function_naming_in_react_compiler Change
_buildManifest.js gzip 770 B 770 B
Overall change 770 B 770 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js sebbie/09-21-enable_anonymous_function_naming_in_react_compiler Change
index.html gzip 525 B 522 B N/A
link.html gzip 539 B 534 B N/A
withRouter.html gzip 519 B 518 B N/A
Overall change 0 B 0 B
Edge SSR bundle Size
vercel/next.js canary vercel/next.js sebbie/09-21-enable_anonymous_function_naming_in_react_compiler Change
edge-ssr.js gzip 121 kB 121 kB N/A
page.js gzip 242 kB 241 kB N/A
Overall change 0 B 0 B
Middleware size Overall increase ⚠️
vercel/next.js canary vercel/next.js sebbie/09-21-enable_anonymous_function_naming_in_react_compiler Change
middleware-b..fest.js gzip 688 B 692 B N/A
middleware-r..fest.js gzip 156 B 155 B N/A
middleware.js gzip 33 kB 33.3 kB ⚠️ +314 B
edge-runtime..pack.js gzip 853 B 853 B
Overall change 33.8 kB 34.1 kB ⚠️ +314 B
Next Runtimes
vercel/next.js canary vercel/next.js sebbie/09-21-enable_anonymous_function_naming_in_react_compiler Change
app-page-exp...dev.js gzip 287 kB 287 kB
app-page-exp..prod.js gzip 157 kB 157 kB
app-page-tur...dev.js gzip 287 kB 287 kB
app-page-tur..prod.js gzip 157 kB 157 kB
app-page-tur...dev.js gzip 275 kB 275 kB
app-page-tur..prod.js gzip 151 kB 151 kB
app-page.run...dev.js gzip 275 kB 275 kB
app-page.run..prod.js gzip 151 kB 151 kB
app-route-ex...dev.js gzip 70.5 kB 70.5 kB
app-route-ex..prod.js gzip 49.6 kB 49.6 kB
app-route-tu...dev.js gzip 70.6 kB 70.6 kB
app-route-tu..prod.js gzip 49.6 kB 49.6 kB
app-route-tu...dev.js gzip 69.9 kB 69.9 kB
app-route-tu..prod.js gzip 49.2 kB 49.2 kB
app-route.ru...dev.js gzip 69.9 kB 69.9 kB
app-route.ru..prod.js gzip 49.2 kB 49.2 kB
dist_client_...dev.js gzip 326 B 326 B
dist_client_...dev.js gzip 328 B 328 B
dist_client_...dev.js gzip 320 B 320 B
dist_client_...dev.js gzip 318 B 318 B
pages-api-tu...dev.js gzip 42.9 kB 42.9 kB
pages-api-tu..prod.js gzip 32.9 kB 32.9 kB
pages-api.ru...dev.js gzip 42.8 kB 42.8 kB
pages-api.ru..prod.js gzip 32.9 kB 32.9 kB
pages-turbo....dev.js gzip 53 kB 53 kB
pages-turbo...prod.js gzip 40.4 kB 40.4 kB
pages.runtim...dev.js gzip 53.2 kB 53.2 kB
pages.runtim..prod.js gzip 40.5 kB 40.5 kB
server.runti..prod.js gzip 78.1 kB 78.1 kB
Overall change 2.64 MB 2.64 MB
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js sebbie/09-21-enable_anonymous_function_naming_in_react_compiler Change
0.pack gzip 3.15 MB 3.16 MB ⚠️ +5.08 kB
index.pack gzip 97 kB 96.3 kB N/A
Overall change 3.15 MB 3.16 MB ⚠️ +5.08 kB
Diff details
Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for _buildManifest.js
@@ -611,36 +611,36 @@ self.__BUILD_MANIFEST = (function (a, b, c) {
       numHashes: NaN,
       bitArray: [],
     },
-    "/": ["static\u002Fchunks\u002Fpages\u002Findex-a7fb71e5f6213aa9.js"],
+    "/": ["static\u002Fchunks\u002Fpages\u002Findex-75ff7f75f4c9520b.js"],
     "/_error": [
-      "static\u002Fchunks\u002Fpages\u002F_error-8f4e796cc66bb887.js",
+      "static\u002Fchunks\u002Fpages\u002F_error-21398e242bebd4bd.js",
     ],
-    "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-97249b00762d04b9.js"],
+    "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-96acbf1ec5bf4dbf.js"],
     "/css": [
       "static\u002Fcss\u002Fded6b86ab9cc0a1f.css",
-      "static\u002Fchunks\u002Fpages\u002Fcss-30fd1831d1c5954d.js",
+      "static\u002Fchunks\u002Fpages\u002Fcss-f0abb8f1d5d6aafc.js",
     ],
     "/dynamic": [
-      "static\u002Fchunks\u002Fpages\u002Fdynamic-933632969493a23b.js",
+      "static\u002Fchunks\u002Fpages\u002Fdynamic-a6de0bd7312dbe87.js",
     ],
     "/edge-ssr": [
-      "static\u002Fchunks\u002Fpages\u002Fedge-ssr-fbde6d2b170ddc8a.js",
+      "static\u002Fchunks\u002Fpages\u002Fedge-ssr-8437b1c654938313.js",
     ],
-    "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-0fcabd05d9a7b019.js"],
-    "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-52423902769dcda6.js"],
+    "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-957c9636cda350bb.js"],
+    "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-48956e83e76a0b7c.js"],
     "/image": [
-      "static\u002Fchunks\u002F3414-0fcfc359d1626bc2.js",
-      "static\u002Fchunks\u002Fpages\u002Fimage-bcf65fa5afa25af3.js",
+      "static\u002Fchunks\u002F4432-80834164a4d7ec68.js",
+      "static\u002Fchunks\u002Fpages\u002Fimage-00893f08e46cefe9.js",
     ],
-    "/link": ["static\u002Fchunks\u002Fpages\u002Flink-107187295a8a4aea.js"],
+    "/link": ["static\u002Fchunks\u002Fpages\u002Flink-1312906a9876c4c3.js"],
     "/routerDirect": [
-      "static\u002Fchunks\u002Fpages\u002FrouterDirect-1422147417dba74a.js",
+      "static\u002Fchunks\u002Fpages\u002FrouterDirect-77c6ee7fa90e109b.js",
     ],
     "/script": [
-      "static\u002Fchunks\u002Fpages\u002Fscript-a68c215ba4b2c288.js",
+      "static\u002Fchunks\u002Fpages\u002Fscript-32f0c3e4bc363d50.js",
     ],
     "/withRouter": [
-      "static\u002Fchunks\u002Fpages\u002FwithRouter-0af6fb4f6ceaec8e.js",
+      "static\u002Fchunks\u002Fpages\u002FwithRouter-0a50058d9954ea8e.js",
     ],
     sortedPages: [
       "\u002F",
Diff for amp-HASH.js
@@ -1,17 +1,65 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [5034],
   {
-    /***/ 4105: /***/ (
+    /***/ 6212: /***/ (
+      __unused_webpack_module,
+      __webpack_exports__,
+      __webpack_require__
+    ) => {
+      "use strict";
+      __webpack_require__.r(__webpack_exports__);
+      /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+        /* harmony export */ config: () => /* binding */ config,
+        /* harmony export */ default: () => /* binding */ Amp,
+        /* harmony export */
+      });
+      /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0__ =
+        __webpack_require__(7023);
+      /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0___default =
+        /*#__PURE__*/ __webpack_require__.n(
+          next_amp__WEBPACK_IMPORTED_MODULE_0__
+        );
+
+      const config = {
+        amp: "hybrid",
+      };
+      function Amp(props) {
+        return (0, next_amp__WEBPACK_IMPORTED_MODULE_0__.useAmp)()
+          ? "AMP mode"
+          : "normal mode";
+      }
+
+      /***/
+    },
+
+    /***/ 7023: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(4642);
+      module.exports = __webpack_require__(9926);
+
+      /***/
+    },
+
+    /***/ 8647: /***/ (
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/amp",
+        function () {
+          return __webpack_require__(6212);
+        },
+      ]);
+      if (false) {
+      }
 
       /***/
     },
 
-    /***/ 4642: /***/ (module, exports, __webpack_require__) => {
+    /***/ 9926: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -27,8 +75,8 @@
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(5977)
       );
-      const _ampcontextsharedruntime = __webpack_require__(8358);
-      const _ampmode = __webpack_require__(242);
+      const _ampcontextsharedruntime = __webpack_require__(5418);
+      const _ampmode = __webpack_require__(3494);
       function useAmp() {
         // Don't assign the context value to a variable to save bytes
         return (0, _ampmode.isInAmpMode)(
@@ -49,61 +97,13 @@
 
       /***/
     },
-
-    /***/ 5261: /***/ (
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/amp",
-        function () {
-          return __webpack_require__(9550);
-        },
-      ]);
-      if (false) {
-      }
-
-      /***/
-    },
-
-    /***/ 9550: /***/ (
-      __unused_webpack_module,
-      __webpack_exports__,
-      __webpack_require__
-    ) => {
-      "use strict";
-      __webpack_require__.r(__webpack_exports__);
-      /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-        /* harmony export */ config: () => /* binding */ config,
-        /* harmony export */ default: () => /* binding */ Amp,
-        /* harmony export */
-      });
-      /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(4105);
-      /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0___default =
-        /*#__PURE__*/ __webpack_require__.n(
-          next_amp__WEBPACK_IMPORTED_MODULE_0__
-        );
-
-      const config = {
-        amp: "hybrid",
-      };
-      function Amp(props) {
-        return (0, next_amp__WEBPACK_IMPORTED_MODULE_0__.useAmp)()
-          ? "AMP mode"
-          : "normal mode";
-      }
-
-      /***/
-    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(5261)
+      __webpack_exec__(8647)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for css-HASH.js
@@ -1,7 +1,14 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [9813],
   {
-    /***/ 5267: /***/ (
+    /***/ 1978: /***/ (module) => {
+      // extracted by mini-css-extract-plugin
+      module.exports = { helloWorld: "css_helloWorld__aUdUq" };
+
+      /***/
+    },
+
+    /***/ 6941: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -15,7 +22,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(7765);
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(6320);
+        __webpack_require__(1978);
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -35,14 +42,7 @@
       /***/
     },
 
-    /***/ 6320: /***/ (module) => {
-      // extracted by mini-css-extract-plugin
-      module.exports = { helloWorld: "css_helloWorld__aUdUq" };
-
-      /***/
-    },
-
-    /***/ 9643: /***/ (
+    /***/ 8685: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -50,7 +50,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/css",
         function () {
-          return __webpack_require__(5267);
+          return __webpack_require__(6941);
         },
       ]);
       if (false) {
@@ -64,7 +64,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(9643)
+      __webpack_exec__(8685)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for dynamic-HASH.js
@@ -1,17 +1,63 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [2291],
   {
-    /***/ 2406: /***/ (
-      module,
-      __unused_webpack_exports,
+    /***/ 2839: /***/ (
+      __unused_webpack_module,
+      __webpack_exports__,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(8949);
+      "use strict";
+      __webpack_require__.r(__webpack_exports__);
+      /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+        /* harmony export */ __N_SSP: () => /* binding */ __N_SSP,
+        /* harmony export */ default: () => __WEBPACK_DEFAULT_EXPORT__,
+        /* harmony export */
+      });
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
+        __webpack_require__(7765);
+      /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1__ =
+        __webpack_require__(7444);
+      /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1___default =
+        /*#__PURE__*/ __webpack_require__.n(
+          next_dynamic__WEBPACK_IMPORTED_MODULE_1__
+        );
+
+      const DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
+        () =>
+          __webpack_require__
+            .e(/* import() */ 1376)
+            .then(__webpack_require__.bind(__webpack_require__, 1376))
+            .then((mod) => mod.Hello),
+        {
+          loadableGenerated: {
+            webpack: () => [/*require.resolve*/ 1376],
+          },
+        }
+      );
+      const Page = () =>
+        /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(
+          react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,
+          {
+            children: [
+              /*#__PURE__*/ (0,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
+                children: "testing next/dynamic size",
+              }),
+              /*#__PURE__*/ (0,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
+                DynamicHello,
+                {}
+              ),
+            ],
+          }
+        );
+      var __N_SSP = true;
+      /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = Page;
 
       /***/
     },
 
-    /***/ 4466: /***/ (
+    /***/ 4478: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -53,7 +99,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(5977)
       );
-      const _loadablecontextsharedruntime = __webpack_require__(8452);
+      const _loadablecontextsharedruntime = __webpack_require__(5792);
       function resolve(obj) {
         return obj && obj.default ? obj.default : obj;
       }
@@ -288,63 +334,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /***/
     },
 
-    /***/ 4545: /***/ (
-      __unused_webpack_module,
-      __webpack_exports__,
-      __webpack_require__
-    ) => {
-      "use strict";
-      __webpack_require__.r(__webpack_exports__);
-      /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-        /* harmony export */ __N_SSP: () => /* binding */ __N_SSP,
-        /* harmony export */ default: () => __WEBPACK_DEFAULT_EXPORT__,
-        /* harmony export */
-      });
-      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(7765);
-      /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(2406);
-      /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1___default =
-        /*#__PURE__*/ __webpack_require__.n(
-          next_dynamic__WEBPACK_IMPORTED_MODULE_1__
-        );
-
-      const DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
-        () =>
-          __webpack_require__
-            .e(/* import() */ 5194)
-            .then(__webpack_require__.bind(__webpack_require__, 5194))
-            .then((mod) => mod.Hello),
-        {
-          loadableGenerated: {
-            webpack: () => [/*require.resolve*/ 5194],
-          },
-        }
-      );
-      const Page = () =>
-        /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(
-          react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,
-          {
-            children: [
-              /*#__PURE__*/ (0,
-              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
-                children: "testing next/dynamic size",
-              }),
-              /*#__PURE__*/ (0,
-              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
-                DynamicHello,
-                {}
-              ),
-            ],
-          }
-        );
-      var __N_SSP = true;
-      /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = Page;
-
-      /***/
-    },
-
-    /***/ 8452: /***/ (
+    /***/ 5792: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -371,24 +361,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /***/
     },
 
-    /***/ 8931: /***/ (
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/dynamic",
-        function () {
-          return __webpack_require__(4545);
-        },
-      ]);
-      if (false) {
-      }
-
-      /***/
-    },
-
-    /***/ 8949: /***/ (module, exports, __webpack_require__) => {
+    /***/ 6153: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -421,7 +394,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
         __webpack_require__(5977)
       );
       const _loadablesharedruntime = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(4466)
+        __webpack_require__(4478)
       );
       const isServerSide = "object" === "undefined";
       // Normalize loader to return the module as form { default: Component } for `React.lazy`.
@@ -521,13 +494,40 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
 
       /***/
     },
+
+    /***/ 7444: /***/ (
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      module.exports = __webpack_require__(6153);
+
+      /***/
+    },
+
+    /***/ 9805: /***/ (
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/dynamic",
+        function () {
+          return __webpack_require__(2839);
+        },
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(8931)
+      __webpack_exec__(9805)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for edge-ssr-HASH.js
@@ -1,24 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [676],
   {
-    /***/ 4717: /***/ (
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/edge-ssr",
-        function () {
-          return __webpack_require__(7776);
-        },
-      ]);
-      if (false) {
-      }
-
-      /***/
-    },
-
-    /***/ 7776: /***/ (
+    /***/ 170: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -37,13 +20,30 @@
 
       /***/
     },
+
+    /***/ 8079: /***/ (
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/edge-ssr",
+        function () {
+          return __webpack_require__(170);
+        },
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(4717)
+      __webpack_exec__(8079)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for head-HASH.js
@@ -1,34 +1,17 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [5350],
   {
-    /***/ 943: /***/ (
+    /***/ 1177: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(2554);
+      module.exports = __webpack_require__(8366);
 
       /***/
     },
 
-    /***/ 3829: /***/ (
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/head",
-        function () {
-          return __webpack_require__(4662);
-        },
-      ]);
-      if (false) {
-      }
-
-      /***/
-    },
-
-    /***/ 4662: /***/ (
+    /***/ 1992: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -43,7 +26,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(7765);
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(943);
+        __webpack_require__(1177);
       /* harmony import */ var next_head__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_head__WEBPACK_IMPORTED_MODULE_1__
@@ -76,13 +59,30 @@
 
       /***/
     },
+
+    /***/ 8751: /***/ (
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/head",
+        function () {
+          return __webpack_require__(1992);
+        },
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(3829)
+      __webpack_exec__(8751)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for hooks-HASH.js
@@ -1,7 +1,24 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [9804],
   {
-    /***/ 2452: /***/ (
+    /***/ 2227: /***/ (
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/hooks",
+        function () {
+          return __webpack_require__(2770);
+        },
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 2770: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -59,30 +76,13 @@
 
       /***/
     },
-
-    /***/ 6105: /***/ (
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/hooks",
-        function () {
-          return __webpack_require__(2452);
-        },
-      ]);
-      if (false) {
-      }
-
-      /***/
-    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(6105)
+      __webpack_exec__(2227)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for link-HASH.js
@@ -1,143 +1,63 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [4672],
   {
-    /***/ 1585: /***/ (module, exports, __webpack_require__) => {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "useIntersection", {
-        enumerable: true,
-        get: function () {
-          return useIntersection;
-        },
-      });
-      const _react = __webpack_require__(5977);
-      const _requestidlecallback = __webpack_require__(356);
-      const hasIntersectionObserver =
-        typeof IntersectionObserver === "function";
-      const observers = new Map();
-      const idList = [];
-      function createObserver(options) {
-        const id = {
-          root: options.root || null,
-          margin: options.rootMargin || "",
-        };
-        const existing = idList.find(
-          (obj) => obj.root === id.root && obj.margin === id.margin
-        );
-        let instance;
-        if (existing) {
-          instance = observers.get(existing);
-          if (instance) {
-            return instance;
-          }
-        }
-        const elements = new Map();
-        const observer = new IntersectionObserver((entries) => {
-          entries.forEach((entry) => {
-            const callback = elements.get(entry.target);
-            const isVisible =
-              entry.isIntersecting || entry.intersectionRatio > 0;
-            if (callback && isVisible) {
-              callback(isVisible);
-            }
-          });
-        }, options);
-        instance = {
-          id,
-          observer,
-          elements,
-        };
-        idList.push(id);
-        observers.set(id, instance);
-        return instance;
-      }
-      function observe(element, callback, options) {
-        const { id, observer, elements } = createObserver(options);
-        elements.set(element, callback);
-        observer.observe(element);
-        return function unobserve() {
-          elements.delete(element);
-          observer.unobserve(element);
-          // Destroy observer when there's nothing left to watch:
-          if (elements.size === 0) {
-            observer.disconnect();
-            observers.delete(id);
-            const index = idList.findIndex(
-              (obj) => obj.root === id.root && obj.margin === id.margin
-            );
-            if (index > -1) {
-              idList.splice(index, 1);
-            }
-          }
-        };
-      }
-      function useIntersection(param) {
-        let { rootRef, rootMargin, disabled } = param;
-        const isDisabled = disabled || !hasIntersectionObserver;
-        const [visible, setVisible] = (0, _react.useState)(false);
-        const elementRef = (0, _react.useRef)(null);
-        const setElement = (0, _react.useCallback)((element) => {
-          elementRef.current = element;
-        }, []);
-        (0, _react.useEffect)(() => {
-          if (hasIntersectionObserver) {
-            if (isDisabled || visible) return;
-            const element = elementRef.current;
-            if (element && element.tagName) {
-              const unobserve = observe(
-                element,
-                (isVisible) => isVisible && setVisible(isVisible),
-                {
-                  root: rootRef == null ? void 0 : rootRef.current,
-                  rootMargin,
-                }
-              );
-              return unobserve;
-            }
-          } else {
-            if (!visible) {
-              const idleCallback = (0,
-              _requestidlecallback.requestIdleCallback)(() => setVisible(true));
-              return () =>
-                (0, _requestidlecallback.cancelIdleCallback)(idleCallback);
-            }
-          }
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [isDisabled, rootMargin, rootRef, visible, elementRef.current]);
-        const resetVisible = (0, _react.useCallback)(() => {
-          setVisible(false);
-        }, []);
-        return [setElement, visible, resetVisible];
-      }
-      if (
-        (typeof exports.default === "function" ||
-          (typeof exports.default === "object" && exports.default !== null)) &&
-        typeof exports.default.__esModule === "undefined"
-      ) {
-        Object.defineProperty(exports.default, "__esModule", {
-          value: true,
-        });
-        Object.assign(exports.default, exports);
-        module.exports = exports.default;
-      } //# sourceMappingURL=use-intersection.js.map
+    /***/ 2783: /***/ (
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      module.exports = __webpack_require__(5926);
 
       /***/
     },
 
-    /***/ 2621: /***/ (
-      module,
-      __unused_webpack_exports,
+    /***/ 4174: /***/ (
+      __unused_webpack_module,
+      __webpack_exports__,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(5410);
+      "use strict";
+      __webpack_require__.r(__webpack_exports__);
+      /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+        /* harmony export */ __N_SSP: () => /* binding */ __N_SSP,
+        /* harmony export */ default: () => __WEBPACK_DEFAULT_EXPORT__,
+        /* harmony export */
+      });
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
+        __webpack_require__(7765);
+      /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ =
+        __webpack_require__(2783);
+      /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default =
+        /*#__PURE__*/ __webpack_require__.n(
+          next_link__WEBPACK_IMPORTED_MODULE_1__
+        );
+
+      function aLink(props) {
+        return /*#__PURE__*/ (0,
+        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
+          children: [
+            /*#__PURE__*/ (0,
+            react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h3", {
+              children: "A Link page!",
+            }),
+            /*#__PURE__*/ (0,
+            react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
+              next_link__WEBPACK_IMPORTED_MODULE_1___default(),
+              {
+                href: "/",
+                children: "Go to /",
+              }
+            ),
+          ],
+        });
+      }
+      var __N_SSP = true;
+      /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = aLink;
 
       /***/
     },
 
-    /***/ 5410: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5926: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -164,16 +84,16 @@
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
         __webpack_require__(5977)
       );
-      const _resolvehref = __webpack_require__(224);
-      const _islocalurl = __webpack_require__(7746);
-      const _formaturl = __webpack_require__(315);
-      const _utils = __webpack_require__(8709);
-      const _addlocale = __webpack_require__(6358);
-      const _routercontextsharedruntime = __webpack_require__(4095);
-      const _useintersection = __webpack_require__(1585);
-      const _getdomainlocale = __webpack_require__(8802);
-      const _addbasepath = __webpack_require__(6151);
-      const _usemergedref = __webpack_require__(9100);
+      const _resolvehref = __webpack_require__(6708);
+      const _islocalurl = __webpack_require__(6526);
+      const _formaturl = __webpack_require__(5575);
+      const _utils = __webpack_require__(3497);
+      const _addlocale = __webpack_require__(722);
+      const _routercontextsharedruntime = __webpack_require__(1235);
+      const _useintersection = __webpack_require__(8069);
+      const _getdomainlocale = __webpack_require__(9734);
+      const _addbasepath = __webpack_require__(4419);
+      const _usemergedref = __webpack_require__(6136);
       const prefetched = new Set();
       function prefetch(router, href, as, options) {
         if (false) {
@@ -495,43 +415,7 @@
       /***/
     },
 
-    /***/ 8802: /***/ (module, exports, __webpack_require__) => {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "getDomainLocale", {
-        enumerable: true,
-        get: function () {
-          return getDomainLocale;
-        },
-      });
-      const _normalizetrailingslash = __webpack_require__(1652);
-      const basePath =
-        /* unused pure expression or super */ null && (false || "");
-      function getDomainLocale(path, locale, locales, domainLocales) {
-        if (false) {
-        } else {
-          return false;
-        }
-      }
-      if (
-        (typeof exports.default === "function" ||
-          (typeof exports.default === "object" && exports.default !== null)) &&
-        typeof exports.default.__esModule === "undefined"
-      ) {
-        Object.defineProperty(exports.default, "__esModule", {
-          value: true,
-        });
-        Object.assign(exports.default, exports);
-        module.exports = exports.default;
-      } //# sourceMappingURL=get-domain-locale.js.map
-
-      /***/
-    },
-
-    /***/ 9100: /***/ (module, exports, __webpack_require__) => {
+    /***/ 6136: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -609,7 +493,7 @@
       /***/
     },
 
-    /***/ 9693: /***/ (
+    /***/ 7047: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -617,7 +501,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/link",
         function () {
-          return __webpack_require__(9948);
+          return __webpack_require__(4174);
         },
       ]);
       if (false) {
@@ -626,48 +510,164 @@
       /***/
     },
 
-    /***/ 9948: /***/ (
-      __unused_webpack_module,
-      __webpack_exports__,
-      __webpack_require__
-    ) => {
+    /***/ 8069: /***/ (module, exports, __webpack_require__) => {
       "use strict";
-      __webpack_require__.r(__webpack_exports__);
-      /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-        /* harmony export */ __N_SSP: () => /* binding */ __N_SSP,
-        /* harmony export */ default: () => __WEBPACK_DEFAULT_EXPORT__,
-        /* harmony export */
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
       });
-      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(7765);
-      /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(2621);
-      /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default =
-        /*#__PURE__*/ __webpack_require__.n(
-          next_link__WEBPACK_IMPORTED_MODULE_1__
+      Object.defineProperty(exports, "useIntersection", {
+        enumerable: true,
+        get: function () {
+          return useIntersection;
+        },
+      });
+      const _react = __webpack_require__(5977);
+      const _requestidlecallback = __webpack_require__(3432);
+      const hasIntersectionObserver =
+        typeof IntersectionObserver === "function";
+      const observers = new Map();
+      const idList = [];
+      function createObserver(options) {
+        const id = {
+          root: options.root || null,
+          margin: options.rootMargin || "",
+        };
+        const existing = idList.find(
+          (obj) => obj.root === id.root && obj.margin === id.margin
         );
-
-      function aLink(props) {
-        return /*#__PURE__*/ (0,
-        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-          children: [
-            /*#__PURE__*/ (0,
-            react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h3", {
-              children: "A Link page!",
-            }),
-            /*#__PURE__*/ (0,
-            react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
-              next_link__WEBPACK_IMPORTED_MODULE_1___default(),
-              {
-                href: "/",
-                children: "Go to /",
-              }
-            ),
-          ],
+        let instance;
+        if (existing) {
+          instance = observers.get(existing);
+          if (instance) {
+            return instance;
+          }
+        }
+        const elements = new Map();
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            const callback = elements.get(entry.target);
+            const isVisible =
+              entry.isIntersecting || entry.intersectionRatio > 0;
+            if (callback && isVisible) {
+              callback(isVisible);
+            }
+          });
+        }, options);
+        instance = {
+          id,
+          observer,
+          elements,
+        };
+        idList.push(id);
+        observers.set(id, instance);
+        return instance;
+      }
+      function observe(element, callback, options) {
+        const { id, observer, elements } = createObserver(options);
+        elements.set(element, callback);
+        observer.observe(element);
+        return function unobserve() {
+          elements.delete(element);
+          observer.unobserve(element);
+          // Destroy observer when there's nothing left to watch:
+          if (elements.size === 0) {
+            observer.disconnect();
+            observers.delete(id);
+            const index = idList.findIndex(
+              (obj) => obj.root === id.root && obj.margin === id.margin
+            );
+            if (index > -1) {
+              idList.splice(index, 1);
+            }
+          }
+        };
+      }
+      function useIntersection(param) {
+        let { rootRef, rootMargin, disabled } = param;
+        const isDisabled = disabled || !hasIntersectionObserver;
+        const [visible, setVisible] = (0, _react.useState)(false);
+        const elementRef = (0, _react.useRef)(null);
+        const setElement = (0, _react.useCallback)((element) => {
+          elementRef.current = element;
+        }, []);
+        (0, _react.useEffect)(() => {
+          if (hasIntersectionObserver) {
+            if (isDisabled || visible) return;
+            const element = elementRef.current;
+            if (element && element.tagName) {
+              const unobserve = observe(
+                element,
+                (isVisible) => isVisible && setVisible(isVisible),
+                {
+                  root: rootRef == null ? void 0 : rootRef.current,
+                  rootMargin,
+                }
+              );
+              return unobserve;
+            }
+          } else {
+            if (!visible) {
+              const idleCallback = (0,
+              _requestidlecallback.requestIdleCallback)(() => setVisible(true));
+              return () =>
+                (0, _requestidlecallback.cancelIdleCallback)(idleCallback);
+            }
+          }
+          // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [isDisabled, rootMargin, rootRef, visible, elementRef.current]);
+        const resetVisible = (0, _react.useCallback)(() => {
+          setVisible(false);
+        }, []);
+        return [setElement, visible, resetVisible];
+      }
+      if (
+        (typeof exports.default === "function" ||
+          (typeof exports.default === "object" && exports.default !== null)) &&
+        typeof exports.default.__esModule === "undefined"
+      ) {
+        Object.defineProperty(exports.default, "__esModule", {
+          value: true,
         });
+        Object.assign(exports.default, exports);
+        module.exports = exports.default;
+      } //# sourceMappingURL=use-intersection.js.map
+
+      /***/
+    },
+
+    /***/ 9734: /***/ (module, exports, __webpack_require__) => {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      Object.defineProperty(exports, "getDomainLocale", {
+        enumerable: true,
+        get: function () {
+          return getDomainLocale;
+        },
+      });
+      const _normalizetrailingslash = __webpack_require__(504);
+      const basePath =
+        /* unused pure expression or super */ null && (false || "");
+      function getDomainLocale(path, locale, locales, domainLocales) {
+        if (false) {
+        } else {
+          return false;
+        }
       }
-      var __N_SSP = true;
-      /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = aLink;
+      if (
+        (typeof exports.default === "function" ||
+          (typeof exports.default === "object" && exports.default !== null)) &&
+        typeof exports.default.__esModule === "undefined"
+      ) {
+        Object.defineProperty(exports.default, "__esModule", {
+          value: true,
+        });
+        Object.assign(exports.default, exports);
+        module.exports = exports.default;
+      } //# sourceMappingURL=get-domain-locale.js.map
 
       /***/
     },
@@ -677,7 +677,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(9693)
+      __webpack_exec__(7047)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for script-HASH.js
@@ -1,7 +1,34 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [1209],
   {
-    /***/ 3699: /***/ (
+    /***/ 1008: /***/ (
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      module.exports = __webpack_require__(2817);
+
+      /***/
+    },
+
+    /***/ 6951: /***/ (
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/script",
+        function () {
+          return __webpack_require__(8889);
+        },
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 8889: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -16,7 +43,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(7765);
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(4802);
+        __webpack_require__(1008);
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_script__WEBPACK_IMPORTED_MODULE_1__
@@ -48,40 +75,13 @@
 
       /***/
     },
-
-    /***/ 4802: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(8661);
-
-      /***/
-    },
-
-    /***/ 7861: /***/ (
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/script",
-        function () {
-          return __webpack_require__(3699);
-        },
-      ]);
-      if (false) {
-      }
-
-      /***/
-    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(7861)
+      __webpack_exec__(6951)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for 3414-HASH.js

Diff too large to display

Diff for 8863-HASH.js
@@ -1,8 +1,33 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [8863],
+  [7009],
   {
-    /***/ 22: /***/ (module, exports, __webpack_require__) => {
+    /***/ 414: /***/ (
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) => {
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      Object.defineProperty(exports, "AmpStateContext", {
+        enumerable: true,
+        get: function () {
+          return AmpStateContext;
+        },
+      });
+      const _interop_require_default = __webpack_require__(2726);
+      const _react = /*#__PURE__*/ _interop_require_default._(
+        __webpack_require__(2224)
+      );
+      const AmpStateContext = _react.default.createContext({});
+      if (false) {
+      } //# sourceMappingURL=amp-context.shared-runtime.js.map
+
+      /***/
+    },
+
+    /***/ 1912: /***/ (module, exports, __webpack_require__) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -12,7 +37,7 @@
           return useMergedRef;
         },
       });
-      const _react = __webpack_require__(2786);
+      const _react = __webpack_require__(2224);
       function useMergedRef(refA, refB) {
         const cleanupA = (0, _react.useRef)(null);
         const cleanupB = (0, _react.useRef)(null);
@@ -78,7 +103,93 @@
       /***/
     },
 
-    /***/ 639: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2843: /***/ (
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) => {
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      Object.defineProperty(exports, "RouterContext", {
+        enumerable: true,
+        get: function () {
+          return RouterContext;
+        },
+      });
+      const _interop_require_default = __webpack_require__(2726);
+      const _react = /*#__PURE__*/ _interop_require_default._(
+        __webpack_require__(2224)
+      );
+      const RouterContext = _react.default.createContext(null);
+      if (false) {
+      } //# sourceMappingURL=router-context.shared-runtime.js.map
+
+      /***/
+    },
+
+    /***/ 3003: /***/ (
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) => {
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      Object.defineProperty(exports, "default", {
+        enumerable: true,
+        get: function () {
+          return _default;
+        },
+      });
+      const _findclosestquality = __webpack_require__(5045);
+      function defaultLoader(param) {
+        let { config, src, width, quality } = param;
+        if (false) {
+        }
+        const q = (0, _findclosestquality.findClosestQuality)(quality, config);
+        return (
+          config.path +
+          "?url=" +
+          encodeURIComponent(src) +
+          "&w=" +
+          width +
+          "&q=" +
+          q +
+          (src.startsWith("/_next/static/media/") && false ? 0 : "")
+        );
+      }
+      // We use this to determine if the import is the default loader
+      // or a custom loader defined by the user in next.config.js
+      defaultLoader.__next_img_default = true;
+      const _default = defaultLoader; //# sourceMappingURL=image-loader.js.map
+
+      /***/
+    },
+
+    /***/ 3810: /***/ (__unused_webpack_module, exports) => {
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      Object.defineProperty(exports, "isInAmpMode", {
+        enumerable: true,
+        get: function () {
+          return isInAmpMode;
+        },
+      });
+      function isInAmpMode(param) {
+        let {
+          ampFirst = false,
+          hybrid = false,
+          hasQuery = false,
+        } = param === void 0 ? {} : param;
+        return ampFirst || (hybrid && hasQuery);
+      } //# sourceMappingURL=amp-mode.js.map
+
+      /***/
+    },
+
+    /***/ 5045: /***/ (__unused_webpack_module, exports) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -109,56 +220,7 @@
       /***/
     },
 
-    /***/ 936: /***/ (__unused_webpack_module, exports) => {
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      0 && 0;
-      function _export(target, all) {
-        for (var name in all)
-          Object.defineProperty(target, name, {
-            enumerable: true,
-            get: all[name],
-          });
-      }
-      _export(exports, {
-        VALID_LOADERS: function () {
-          return VALID_LOADERS;
-        },
-        imageConfigDefault: function () {
-          return imageConfigDefault;
-        },
-      });
-      const VALID_LOADERS = [
-        "default",
-        "imgix",
-        "cloudinary",
-        "akamai",
-        "custom",
-      ];
-      const imageConfigDefault = {
-        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-        path: "/_next/image",
-        loader: "default",
-        loaderFile: "",
-        domains: [],
-        disableStaticImages: false,
-        minimumCacheTTL: 14400,
-        formats: ["image/webp"],
-        dangerouslyAllowSVG: false,
-        contentSecurityPolicy: "script-src 'none'; frame-src 'none'; sandbox;",
-        contentDispositionType: "attachment",
-        localPatterns: undefined,
-        remotePatterns: [],
-        qualities: [75],
-        unoptimized: false,
-      }; //# sourceMappingURL=image-config.js.map
-
-      /***/
-    },
-
-    /***/ 1268: /***/ (__unused_webpack_module, exports) => {
+    /***/ 5218: /***/ (__unused_webpack_module, exports) => {
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
        */
@@ -212,7 +274,7 @@
       /***/
     },
 
-    /***/ 1796: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5402: /***/ (module, exports, __webpack_require__) => {
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -233,19 +295,19 @@
           return defaultHead;
         },
       });
-      const _interop_require_default = __webpack_require__(8182);
-      const _interop_require_wildcard = __webpack_require__(8319);
-      const _jsxruntime = __webpack_require__(1050);
+      const _interop_require_default = __webpack_require__(2726);
+      const _interop_require_wildcard = __webpack_require__(2527);
+      const _jsxruntime = __webpack_require__(8204);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(2786)
+        __webpack_require__(2224)
       );
       const _sideeffect = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5581)
+        __webpack_require__(9319)
       );
-      const _ampcontextsharedruntime = __webpack_require__(3800);
-      const _headmanagercontextsharedruntime = __webpack_require__(4950);
-      const _ampmode = __webpack_require__(7824);
-      const _warnonce = __webpack_require__(2854);
+      const _ampcontextsharedruntime = __webpack_require__(414);
+      const _headmanagercontextsharedruntime = __webpack_require__(3100);
+      const _ampmode = __webpack_require__(3810);
+      const _warnonce = __webpack_require__(4504);
       function defaultHead(inAmpMode) {
         if (inAmpMode === void 0) inAmpMode = false;
         const head = [
@@ -410,7 +472,7 @@
       /***/
     },
 
-    /***/ 2843: /***/ (
+    /***/ 6745: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -424,9 +486,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(2854);
-      const _imageblursvg = __webpack_require__(1268);
-      const _imageconfig = __webpack_require__(936);
+      const _warnonce = __webpack_require__(4504);
+      const _imageblursvg = __webpack_require__(5218);
+      const _imageconfig = __webpack_require__(9278);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -858,239 +920,7 @@
       /***/
     },
 
-    /***/ 3800: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "AmpStateContext", {
-        enumerable: true,
-        get: function () {
-          return AmpStateContext;
-        },
-      });
-      const _interop_require_default = __webpack_require__(8182);
-      const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(2786)
-      );
-      const AmpStateContext = _react.default.createContext({});
-      if (false) {
-      } //# sourceMappingURL=amp-context.shared-runtime.js.map
-
-      /***/
-    },
-
-    /***/ 5581: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "default", {
-        enumerable: true,
-        get: function () {
-          return SideEffect;
-        },
-      });
-      const _react = __webpack_require__(2786);
-      const isServer = "object" === "undefined";
-      const useClientOnlyLayoutEffect = isServer
-        ? () => {}
-        : _react.useLayoutEffect;
-      const useClientOnlyEffect = isServer ? () => {} : _react.useEffect;
-      function SideEffect(props) {
-        const { headManager, reduceComponentsToState } = props;
-        function emitChange() {
-          if (headManager && headManager.mountedInstances) {
-            const headElements = _react.Children.toArray(
-              Array.from(headManager.mountedInstances).filter(Boolean)
-            );
-            headManager.updateHead(
-              reduceComponentsToState(headElements, props)
-            );
-          }
-        }
-        if (isServer) {
-          var _headManager_mountedInstances;
-          headManager == null
-            ? void 0
-            : (_headManager_mountedInstances = headManager.mountedInstances) ==
-              null
-            ? void 0
-            : _headManager_mountedInstances.add(props.children);
-          emitChange();
-        }
-        useClientOnlyLayoutEffect(() => {
-          var _headManager_mountedInstances;
-          headManager == null
-            ? void 0
-            : (_headManager_mountedInstances = headManager.mountedInstances) ==
-              null
-            ? void 0
-            : _headManager_mountedInstances.add(props.children);
-          return () => {
-            var _headManager_mountedInstances;
-            headManager == null
-              ? void 0
-              : (_headManager_mountedInstances =
-                  headManager.mountedInstances) == null
-              ? void 0
-              : _headManager_mountedInstances.delete(props.children);
-          };
-        });
-        // We need to call `updateHead` method whenever the `SideEffect` is trigger in all
-        // life-cycles: mount, update, unmount. However, if there are multiple `SideEffect`s
-        // being rendered, we only trigger the method from the last one.
-        // This is ensured by keeping the last unflushed `updateHead` in the `_pendingUpdate`
-        // singleton in the layout effect pass, and actually trigger it in the effect pass.
-        useClientOnlyLayoutEffect(() => {
-          if (headManager) {
-            headManager._pendingUpdate = emitChange;
-          }
-          return () => {
-            if (headManager) {
-              headManager._pendingUpdate = emitChange;
-            }
-          };
-        });
-        useClientOnlyEffect(() => {
-          if (headManager && headManager._pendingUpdate) {
-            headManager._pendingUpdate();
-            headManager._pendingUpdate = null;
-          }
-          return () => {
-            if (headManager && headManager._pendingUpdate) {
-              headManager._pendingUpdate();
-              headManager._pendingUpdate = null;
-            }
-          };
-        });
-        return null;
-      } //# sourceMappingURL=side-effect.js.map
-
-      /***/
-    },
-
-    /***/ 7053: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "RouterContext", {
-        enumerable: true,
-        get: function () {
-          return RouterContext;
-        },
-      });
-      const _interop_require_default = __webpack_require__(8182);
-      const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(2786)
-      );
-      const RouterContext = _react.default.createContext(null);
-      if (false) {
-      } //# sourceMappingURL=router-context.shared-runtime.js.map
-
-      /***/
-    },
-
-    /***/ 7281: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "default", {
-        enumerable: true,
-        get: function () {
-          return _default;
-        },
-      });
-      const _findclosestquality = __webpack_require__(639);
-      function defaultLoader(param) {
-        let { config, src, width, quality } = param;
-        if (false) {
-        }
-        const q = (0, _findclosestquality.findClosestQuality)(quality, config);
-        return (
-          config.path +
-          "?url=" +
-          encodeURIComponent(src) +
-          "&w=" +
-          width +
-          "&q=" +
-          q +
-          (src.startsWith("/_next/static/media/") && false ? 0 : "")
-        );
-      }
-      // We use this to determine if the import is the default loader
-      // or a custom loader defined by the user in next.config.js
-      defaultLoader.__next_img_default = true;
-      const _default = defaultLoader; //# sourceMappingURL=image-loader.js.map
-
-      /***/
-    },
-
-    /***/ 7480: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "ImageConfigContext", {
-        enumerable: true,
-        get: function () {
-          return ImageConfigContext;
-        },
-      });
-      const _interop_require_default = __webpack_require__(8182);
-      const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(2786)
-      );
-      const _imageconfig = __webpack_require__(936);
-      const ImageConfigContext = _react.default.createContext(
-        _imageconfig.imageConfigDefault
-      );
-      if (false) {
-      } //# sourceMappingURL=image-config-context.shared-runtime.js.map
-
-      /***/
-    },
-
-    /***/ 7824: /***/ (__unused_webpack_module, exports) => {
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "isInAmpMode", {
-        enumerable: true,
-        get: function () {
-          return isInAmpMode;
-        },
-      });
-      function isInAmpMode(param) {
-        let {
-          ampFirst = false,
-          hybrid = false,
-          hasQuery = false,
-        } = param === void 0 ? {} : param;
-        return ampFirst || (hybrid && hasQuery);
-      } //# sourceMappingURL=amp-mode.js.map
-
-      /***/
-    },
-
-    /***/ 8863: /***/ (module, exports, __webpack_require__) => {
+    /***/ 7009: /***/ (module, exports, __webpack_require__) => {
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -1101,27 +931,27 @@
           return Image;
         },
       });
-      const _interop_require_default = __webpack_require__(8182);
-      const _interop_require_wildcard = __webpack_require__(8319);
-      const _jsxruntime = __webpack_require__(1050);
+      const _interop_require_default = __webpack_require__(2726);
+      const _interop_require_wildcard = __webpack_require__(2527);
+      const _jsxruntime = __webpack_require__(8204);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(2786)
+        __webpack_require__(2224)
       );
       const _reactdom = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1407)
+        __webpack_require__(1345)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1796)
+        __webpack_require__(5402)
       );
-      const _getimgprops = __webpack_require__(2843);
-      const _imageconfig = __webpack_require__(936);
-      const _imageconfigcontextsharedruntime = __webpack_require__(7480);
-      const _warnonce = __webpack_require__(2854);
-      const _routercontextsharedruntime = __webpack_require__(7053);
+      const _getimgprops = __webpack_require__(6745);
+      const _imageconfig = __webpack_require__(9278);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9690);
+      const _warnonce = __webpack_require__(4504);
+      const _routercontextsharedruntime = __webpack_require__(2843);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(7281)
+        __webpack_require__(3003)
       );
-      const _usemergedref = __webpack_require__(22);
+      const _usemergedref = __webpack_require__(1912);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -1447,5 +1277,175 @@
 
       /***/
     },
+
+    /***/ 9278: /***/ (__unused_webpack_module, exports) => {
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      0 && 0;
+      function _export(target, all) {
+        for (var name in all)
+          Object.defineProperty(target, name, {
+            enumerable: true,
+            get: all[name],
+          });
+      }
+      _export(exports, {
+        VALID_LOADERS: function () {
+          return VALID_LOADERS;
+        },
+        imageConfigDefault: function () {
+          return imageConfigDefault;
+        },
+      });
+      const VALID_LOADERS = [
+        "default",
+        "imgix",
+        "cloudinary",
+        "akamai",
+        "custom",
+      ];
+      const imageConfigDefault = {
+        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+        path: "/_next/image",
+        loader: "default",
+        loaderFile: "",
+        domains: [],
+        disableStaticImages: false,
+        minimumCacheTTL: 14400,
+        formats: ["image/webp"],
+        dangerouslyAllowSVG: false,
+        contentSecurityPolicy: "script-src 'none'; frame-src 'none'; sandbox;",
+        contentDispositionType: "attachment",
+        localPatterns: undefined,
+        remotePatterns: [],
+        qualities: [75],
+        unoptimized: false,
+      }; //# sourceMappingURL=image-config.js.map
+
+      /***/
+    },
+
+    /***/ 9319: /***/ (
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) => {
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      Object.defineProperty(exports, "default", {
+        enumerable: true,
+        get: function () {
+          return SideEffect;
+        },
+      });
+      const _react = __webpack_require__(2224);
+      const isServer = "object" === "undefined";
+      const useClientOnlyLayoutEffect = isServer
+        ? () => {}
+        : _react.useLayoutEffect;
+      const useClientOnlyEffect = isServer ? () => {} : _react.useEffect;
+      function SideEffect(props) {
+        const { headManager, reduceComponentsToState } = props;
+        function emitChange() {
+          if (headManager && headManager.mountedInstances) {
+            const headElements = _react.Children.toArray(
+              Array.from(headManager.mountedInstances).filter(Boolean)
+            );
+            headManager.updateHead(
+              reduceComponentsToState(headElements, props)
+            );
+          }
+        }
+        if (isServer) {
+          var _headManager_mountedInstances;
+          headManager == null
+            ? void 0
+            : (_headManager_mountedInstances = headManager.mountedInstances) ==
+              null
+            ? void 0
+            : _headManager_mountedInstances.add(props.children);
+          emitChange();
+        }
+        useClientOnlyLayoutEffect(() => {
+          var _headManager_mountedInstances;
+          headManager == null
+            ? void 0
+            : (_headManager_mountedInstances = headManager.mountedInstances) ==
+              null
+            ? void 0
+            : _headManager_mountedInstances.add(props.children);
+          return () => {
+            var _headManager_mountedInstances;
+            headManager == null
+              ? void 0
+              : (_headManager_mountedInstances =
+                  headManager.mountedInstances) == null
+              ? void 0
+              : _headManager_mountedInstances.delete(props.children);
+          };
+        });
+        // We need to call `updateHead` method whenever the `SideEffect` is trigger in all
+        // life-cycles: mount, update, unmount. However, if there are multiple `SideEffect`s
+        // being rendered, we only trigger the method from the last one.
+        // This is ensured by keeping the last unflushed `updateHead` in the `_pendingUpdate`
+        // singleton in the layout effect pass, and actually trigger it in the effect pass.
+        useClientOnlyLayoutEffect(() => {
+          if (headManager) {
+            headManager._pendingUpdate = emitChange;
+          }
+          return () => {
+            if (headManager) {
+              headManager._pendingUpdate = emitChange;
+            }
+          };
+        });
+        useClientOnlyEffect(() => {
+          if (headManager && headManager._pendingUpdate) {
+            headManager._pendingUpdate();
+            headManager._pendingUpdate = null;
+          }
+          return () => {
+            if (headManager && headManager._pendingUpdate) {
+              headManager._pendingUpdate();
+              headManager._pendingUpdate = null;
+            }
+          };
+        });
+        return null;
+      } //# sourceMappingURL=side-effect.js.map
+
+      /***/
+    },
+
+    /***/ 9690: /***/ (
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) => {
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      Object.defineProperty(exports, "ImageConfigContext", {
+        enumerable: true,
+        get: function () {
+          return ImageConfigContext;
+        },
+      });
+      const _interop_require_default = __webpack_require__(2726);
+      const _react = /*#__PURE__*/ _interop_require_default._(
+        __webpack_require__(2224)
+      );
+      const _imageconfig = __webpack_require__(9278);
+      const ImageConfigContext = _react.default.createContext(
+        _imageconfig.imageConfigDefault
+      );
+      if (false) {
+      } //# sourceMappingURL=image-config-context.shared-runtime.js.map
+
+      /***/
+    },
   },
 ]);
Diff for 9304-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for main-app-HASH.js
@@ -1,67 +1,67 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [4977],
   {
-    /***/ 1341: /***/ (
+    /***/ 3550: /***/ () => {
+      /* (ignored) */
+      /***/
+    },
+
+    /***/ 7867: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 2673, 23)
+        __webpack_require__.t.bind(__webpack_require__, 3319, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 4710, 23)
+        __webpack_require__.t.bind(__webpack_require__, 3564, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 9138, 23)
+        __webpack_require__.t.bind(__webpack_require__, 4932, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 1049, 23)
+        __webpack_require__.t.bind(__webpack_require__, 5963, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 9207, 23)
+        __webpack_require__.t.bind(__webpack_require__, 4549, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 4379, 23)
+        __webpack_require__.t.bind(__webpack_require__, 3877, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 631, 23)
+        __webpack_require__.t.bind(__webpack_require__, 6769, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 3798, 23)
+        __webpack_require__.t.bind(__webpack_require__, 7356, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 6231, 23)
+        __webpack_require__.t.bind(__webpack_require__, 5521, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 4706, 23)
+        __webpack_require__.t.bind(__webpack_require__, 9520, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 7121, 23)
+        __webpack_require__.t.bind(__webpack_require__, 5947, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 6594, 23)
+        __webpack_require__.t.bind(__webpack_require__, 1720, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 2231)
+        __webpack_require__.bind(__webpack_require__, 977)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 9683, 23)
+        __webpack_require__.t.bind(__webpack_require__, 7569, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 174, 23)
+        __webpack_require__.t.bind(__webpack_require__, 1504, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 3496, 23)
+        __webpack_require__.t.bind(__webpack_require__, 4186, 23)
       );
 
       /***/
     },
-
-    /***/ 3228: /***/ () => {
-      /* (ignored) */
-      /***/
-    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
@@ -69,8 +69,8 @@
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(
       0,
-      [5862, 9304],
-      () => (__webpack_exec__(7007), __webpack_exec__(1341))
+      [3008, 2426],
+      () => (__webpack_exec__(6401), __webpack_exec__(7867))
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Commit: 592b4dd

@eps1lon eps1lon force-pushed the sebbie/09-22-_turbopack_ensure_react_compiler_options_are_based_dev_vs_prod branch from 9d0ab60 to bc809d5 Compare September 23, 2025 07:34
@eps1lon eps1lon force-pushed the sebbie/09-21-enable_anonymous_function_naming_in_react_compiler branch from fb0fb41 to 340c4bb Compare September 23, 2025 07:34
let $_: any
if (typeof window !== 'undefined') {
// eslint-disable-next-line no-eval
$_ = eval('$')
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React Compiler now bails out when it detects eval. The new test will assert on more specific Compiler behavior by checking that we actually don't re-render children due to memoization.

@eps1lon eps1lon force-pushed the sebbie/09-21-enable_anonymous_function_naming_in_react_compiler branch from 340c4bb to 0ba1b90 Compare September 23, 2025 08:24
@ijjk ijjk added Documentation Related to Next.js' official documentation. Turbopack Related to Turbopack with Next.js. labels Sep 23, 2025
@eps1lon eps1lon force-pushed the sebbie/09-22-_turbopack_ensure_react_compiler_options_are_based_dev_vs_prod branch from bc809d5 to e337cb5 Compare September 23, 2025 09:32
Comment on lines +100 to +104
const devFunctionName =
variant === 'babelrc' && !isTurbopack
? // next/babel transpiles away arrow functions defeating the React Compiler naming
// TODO: Does Webpack or Turbopack get the Babel config right?
'PageUseEffect'
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PageUseEffect is expected if source -> React Compiler -> Babel.

Seems like plugin ordering is slightly off between Turbopack and Webpack.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(copying from DMs)

Turbopack does resolve .babelrc, and does load the next/babel preset, but it doesn't do any ECMAScript downleveling:

if (isStandalone) {
// Just enable a few syntax plugins, we'll let SWC handle any of the downleveling or
// next.js-specific transforms.
return {
sourceType: 'unambiguous',
presets: [
[
presetTypescriptSyntaxOnly,
options['syntax-typescript'] ?? options['preset-typescript'] ?? {},
],
],
plugins: [
require('next/dist/compiled/babel/plugin-syntax-jsx') as typeof import('next/dist/compiled/babel/plugin-syntax-jsx'),
...sharedSyntaxPlugins,
],
}
}

Instead the downleveling happens in a later pass with SWC. Turbopack has to parse it later with SWC anyways, so there's little point in trying to avoid using SWC for downleveling, and SWC should be much faster at that than Babel.

I sorta extended/tweaked the definition of "standalone" mode to mean "minimal babel". It's possible to have a babelrc in standalone mode now, which is what Turbopack uses.

@eps1lon eps1lon force-pushed the sebbie/09-22-_turbopack_ensure_react_compiler_options_are_based_dev_vs_prod branch from e337cb5 to 9d81314 Compare September 23, 2025 09:42
@eps1lon eps1lon force-pushed the sebbie/09-21-enable_anonymous_function_naming_in_react_compiler branch 2 times, most recently from 7f8b32d to 59ce922 Compare September 23, 2025 09:45
@eps1lon eps1lon force-pushed the sebbie/09-22-_turbopack_ensure_react_compiler_options_are_based_dev_vs_prod branch from 9d81314 to 7c540c7 Compare September 23, 2025 09:45
// TODO: enable `environment.enableNameAnonymousFunctions`Ï
environment: {
enableNameAnonymousFunctions: true,
},
Copy link
Contributor

@vercel vercel bot Sep 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The object spread operation will overwrite the entire environment object when user options are provided, losing the default enableNameAnonymousFunctions: true setting in development mode.

View Details
📝 Patch Details
diff --git a/packages/next/src/build/get-babel-loader-config.ts b/packages/next/src/build/get-babel-loader-config.ts
index 2535e974bb..c182c6f294 100644
--- a/packages/next/src/build/get-babel-loader-config.ts
+++ b/packages/next/src/build/get-babel-loader-config.ts
@@ -40,6 +40,15 @@ const getReactCompilerPlugins = (
   const compilerOptions: JSONValue = {
     ...defaultOptions,
     ...options,
+    // Merge environment configuration to preserve defaults
+    ...(defaultOptions.environment || options.environment
+      ? {
+          environment: {
+            ...defaultOptions.environment,
+            ...options.environment,
+          },
+        }
+      : {}),
   }
   return [[getReactCompiler(), compilerOptions]]
 }

Analysis

React Compiler environment options overwrite defaults in development mode

What fails: getReactCompilerPlugins() in packages/next/src/build/get-babel-loader-config.ts uses shallow spread that overwrites the entire environment object, losing the default enableNameAnonymousFunctions: true setting in development mode

How to reproduce:

// In Next.js config with React Compiler enabled in dev mode
experimental: {
  reactCompiler: {
    environment: {
      customProperty: true
    }
  }
}

Result: Compiler options contain environment: { customProperty: true } instead of merging with defaults

Expected: Should merge to environment: { enableNameAnonymousFunctions: true, customProperty: true } per React Compiler environment configuration

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's prohibited via types. If people do that, they explicitly opted into "trust me, bro" mode and can get the old behavior back via reactCompiler: { environment: {enableNameAnonymousFunctions: process.env.NODE_ENV !== 'production' } }

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I guess there's some minor divergence between webpack+turbopack here:

  • Webpack weakly enforces that environment is not set by the user via the typescript definition and the zod schema (generates a warning when next dev starts)
  • Turbopack strongly enforces this is not set by not including it in the Rust struct.

Right now the Rust implementation silently ignores unknown fields (I think that's okay because the zod schema also runs), but we could turn it into a hard error with #[serde(deny_unknown_fields)]

IMO, this minor divergence is probably not worth worrying too much about, but FYI.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we can simplify code and make it consistently ignore user configured environment. It's not documented at the moment so we can follow-up with Meta if that's supposed to be user-configureable.

@codspeed-hq
Copy link

codspeed-hq bot commented Sep 23, 2025

CodSpeed Instrumentation Performance Report

Merging #84070 will not alter performance

Comparing sebbie/09-21-enable_anonymous_function_naming_in_react_compiler (592b4dd) with canary (55f83e0)

Summary

✅ 15 untouched
⏩ 3 skipped1

Footnotes

  1. 3 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports.

@eps1lon eps1lon force-pushed the sebbie/09-21-enable_anonymous_function_naming_in_react_compiler branch 2 times, most recently from 1b0972e to c4a521f Compare September 23, 2025 13:33
@eps1lon eps1lon marked this pull request as ready for review September 23, 2025 14:44
@eps1lon eps1lon requested a review from bgw September 23, 2025 14:44
Comment on lines +100 to +104
const devFunctionName =
variant === 'babelrc' && !isTurbopack
? // next/babel transpiles away arrow functions defeating the React Compiler naming
// TODO: Does Webpack or Turbopack get the Babel config right?
'PageUseEffect'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(copying from DMs)

Turbopack does resolve .babelrc, and does load the next/babel preset, but it doesn't do any ECMAScript downleveling:

if (isStandalone) {
// Just enable a few syntax plugins, we'll let SWC handle any of the downleveling or
// next.js-specific transforms.
return {
sourceType: 'unambiguous',
presets: [
[
presetTypescriptSyntaxOnly,
options['syntax-typescript'] ?? options['preset-typescript'] ?? {},
],
],
plugins: [
require('next/dist/compiled/babel/plugin-syntax-jsx') as typeof import('next/dist/compiled/babel/plugin-syntax-jsx'),
...sharedSyntaxPlugins,
],
}
}

Instead the downleveling happens in a later pass with SWC. Turbopack has to parse it later with SWC anyways, so there's little point in trying to avoid using SWC for downleveling, and SWC should be much faster at that than Babel.

I sorta extended/tweaked the definition of "standalone" mode to mean "minimal babel". It's possible to have a babelrc in standalone mode now, which is what Turbopack uses.

@eps1lon eps1lon changed the base branch from sebbie/09-22-_turbopack_ensure_react_compiler_options_are_based_dev_vs_prod to graphite-base/84070 September 24, 2025 06:55
@graphite-app
Copy link
Contributor

graphite-app bot commented Sep 24, 2025

Merge activity

  • Sep 24, 6:57 AM UTC: This pull request can not be added to the Graphite merge queue. Please try rebasing and resubmitting to merge when ready.
  • Sep 24, 6:57 AM UTC: Graphite disabled "merge when ready" on this PR due to: a merge conflict with the target branch; resolve the conflict and try again..

Comment on lines +11 to +15
const callStack = new Error('test-top-frame').stack.split(
'test-top-frame\n'
)[1]
// indices might change due to different compiler optimizations
const callFrame = callStack.split('\n')[0]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const callStack = new Error('test-top-frame').stack.split(
'test-top-frame\n'
)[1]
// indices might change due to different compiler optimizations
const callFrame = callStack.split('\n')[0]
const stackParts = new Error('test-top-frame').stack?.split(
'test-top-frame\n'
)
const callStack = stackParts?.[1]
// indices might change due to different compiler optimizations
const callFrame = callStack?.split('\n')[0] || 'unknown'

The stack trace parsing code can throw a TypeError if the stack format doesn't match expectations, causing the test to fail unexpectedly.

View Details

Analysis

TypeError in stack trace parsing can crash function-naming test

What fails: page.tsx useEffect in test/e2e/react-compiler/app/function-naming/ throws TypeError when Error.stack format varies across JavaScript engines

How to reproduce:

// Simulate non-standard stack format (can occur in different browsers/engines)
const mockError = { stack: 'Error: some-other-error\n    at somewhere' };
const callStack = mockError.stack.split('test-top-frame\n')[1]; // undefined
const callFrame = callStack.split('\n')[0]; // TypeError: Cannot read properties of undefined (reading 'split')

Result: TypeError: "Cannot read properties of undefined (reading 'split')" when stack doesn't contain expected pattern

Expected: Should handle missing/malformed stack traces gracefully per MDN Error.stack docs - stack format varies between engines and isn't standardized

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's fine. Then the test fails.

@eps1lon eps1lon force-pushed the sebbie/09-21-enable_anonymous_function_naming_in_react_compiler branch from 630d8b4 to af3c151 Compare September 24, 2025 07:10
@ijjk ijjk added the create-next-app Related to our CLI tool for quickly starting a new Next.js application. label Sep 24, 2025
@vercel
Copy link
Contributor

vercel bot commented Sep 24, 2025

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @huozhi:

packages/next/src/server/config.ts

@eps1lon eps1lon changed the base branch from graphite-base/84070 to canary September 24, 2025 07:21
@eps1lon eps1lon enabled auto-merge (squash) September 24, 2025 07:53
@eps1lon eps1lon merged commit b1d412c into canary Sep 24, 2025
299 of 303 checks passed
@eps1lon eps1lon deleted the sebbie/09-21-enable_anonymous_function_naming_in_react_compiler branch September 24, 2025 08:10
@github-actions github-actions bot added the locked label Oct 8, 2025
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 8, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

create-next-app Related to our CLI tool for quickly starting a new Next.js application. created-by: Next.js team PRs by the Next.js team. Documentation Related to Next.js' official documentation. locked tests Turbopack Related to Turbopack with Next.js. type: next

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants