[dev-overlay] Render Dev Overlay with a separate React instance

[eps1lon]

Might need to jump directly to separate bundle. Not clear if with { turbopack-transition: 'some-layer ' } works the same as Webpack's module layers.

TODO:

• Pages Router

Ideally we would've moved it to a separate leaf (1st commit), then separate Root and then separate React. Separate leaf triggers the know "switched to client-side rendering" bug. Separate Root triggers it as well.

So we skip these steps and jump towards separate React instance. As a follow-up, we'll create a separate bundle instead of module layer. That way we can skip expensive dev parsing by bundlers and even ship a prod variant to next dev.

We're dispatching now with a singleton. Until the actual dispatch from the Reducer is available, we queue callbacks. The queue currently grows indefinitely since we assume that there's a finite time until the Dev Overlay is mounted.

There's no scenario I see where the Dev Overlay unmounts but events continue to come in. But maybe we should warn about that scenario if we create it later. Right now it'll just go into the queue and then gets replayed when we remount.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c26f093

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[eps1lon]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• [dev-overlay] Render Dev Overlay with a separate React instance #79699 👈 (View in Graphite)
• [dev-overlay] Inject get*Stack implementation #79789
• [dev-overlay] Parse stacks in reducer not during dispatch #79788
• canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

[ijjk]

Failing test suites

Commit: c26f093

pnpm test test/integration/build-indicator/test/index.test.js

• Build Activity Indicator > Enabled - (app) > Shows build indicator when page is built from modifying
• Build Activity Indicator > Enabled - (app) > webpack only > Shows the build indicator when a page is built during navigation

Expand output

● Build Activity Indicator › Enabled - (app) › webpack only › Shows the build indicator when a page is built during navigation

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

  79 |           await waitFor(500)
  80 |           const wasVisible = await browser.eval('window.showedBuilder')
> 81 |           expect(wasVisible).toBe(true)
     |                              ^
  82 |           await browser.close()
  83 |         })
  84 |       }

  at Object.toBe (integration/build-indicator/test/index.test.js:81:30)

● Build Activity Indicator › Enabled - (app) › Shows build indicator when page is built from modifying

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

  102 |       const wasVisible = await browser.eval('window.showedBuilder')
  103 |
> 104 |       expect(wasVisible).toBe(true)
      |                          ^
  105 |       await fs.writeFile(pagePath, origContent, 'utf8')
  106 |       await browser.close()
  107 |     })

  at Object.toBe (integration/build-indicator/test/index.test.js:104:26)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/next-image-new/app-dir-qualities/test/index.test.ts

• Image localPatterns config > development mode > should fail to load img when quality is 100

Expand output

● Image localPatterns config › development mode › should fail to load img when quality is 100

Expected Redbox but found no visible one.

  78 |     const browser = await webdriver(appPort, page)
  79 |     if (mode === 'dev') {
> 80 |       await assertHasRedbox(browser)
     |       ^
  81 |       expect(await getRedboxHeader(browser)).toMatch(
  82 |         /Invalid quality prop (.+) on `next\/image` does not match `images.qualities` configured/g
  83 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir-qualities/test/index.test.ts:80:7)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev-turbo test/development/app-dir/dynamic-error-trace/index.test.ts (turbopack)

• app dir - dynamic error trace > should show the error trace

Expand output

● app dir - dynamic error trace › should show the error trace

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `app dir - dynamic error trace should show the error trace 1`

- Snapshot  -  9
+ Received  + 22

- {
-   "description": "Route / with `dynamic = "error"` couldn't be rendered statically because it used `headers`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering",
-   "environmentLabel": "Server",
-   "label": "Runtime Error",
-   "source": "app/lib.js (4:13) @ Foo
+ [
+   {
+     "description": "Route / with `dynamic = "error"` couldn't be rendered statically because it used `headers`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering",
+     "environmentLabel": "Server",
+     "label": "Runtime Error",
+     "source": "app/lib.js (4:13) @ Foo
+ > 4 |   useHeaders()
+     |             ^",
+     "stack": [
+       "Foo app/lib.js (4:13)",
+     ],
+   },
+   {
+     "description": "Route / with `dynamic = "error"` couldn't be rendered statically because it used `headers`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering",
+     "environmentLabel": null,
+     "label": "Runtime Error",
+     "source": "app/lib.js (4:13) @ Foo
  > 4 |   useHeaders()
      |             ^",
-   "stack": [
-     "Foo app/lib.js (4:13)",
-   ],
- }
+     "stack": [
+       "Foo app/lib.js (4:13)",
+     ],
+   },
+ ]

  12 |
  13 |     // TODO(veil): Where is the stackframe for app/page.js?
> 14 |     await expect(browser).toDisplayRedbox(`
     |                           ^
  15 |      {
  16 |        "description": "Route / with \`dynamic = "error"\` couldn't be rendered statically because it used \`headers\`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering",
  17 |        "environmentLabel": "Server",

  at Object.toDisplayRedbox (development/app-dir/dynamic-error-trace/index.test.ts:14:27)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/development/acceptance-app/error-message-url.test.ts

• Error overlay - error message urls > should be possible to click url in runtime error

Expand output

● Error overlay - error message urls › should be possible to click url in runtime error

Redbox did not open.

  52 |     )
  53 |     const { session, browser } = sandbox
> 54 |     await session.openRedbox()
     |     ^
  55 |
  56 |     const link = await browser.elementByCss('#nextjs__container_errors__link a')
  57 |     const text = await link.text()

  at Object.<anonymous> (development/acceptance-app/error-message-url.test.ts:54:5)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/development/app-dir/serialize-circular-error/serialize-circular-error.test.ts

• serialize-circular-error > should serialize the object from client component in console correctly

Expand output

● serialize-circular-error › should serialize the object from client component in console correctly

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `serialize-circular-error should serialize the object from client component in console correctly 1`

- Snapshot  - 7
+ Received  + 1

- {
-   "description": "[object Object]",
-   "environmentLabel": null,
-   "label": "Runtime Error",
-   "source": null,
-   "stack": [],
- }
+ "Expected Redbox but found no visible one."

  28 |
  29 |     // TODO: Format arbitrary messages in Redbox
> 30 |     await expect(browser).toDisplayRedbox(`
     |                           ^
  31 |      {
  32 |        "description": "[object Object]",
  33 |        "environmentLabel": null,

  at Object.toDisplayRedbox (development/app-dir/serialize-circular-error/serialize-circular-error.test.ts:30:27)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev-turbo test/development/app-dir/hydration-error-count/hydration-error-count.test.ts (turbopack)

• hydration-error-count > should display runtime error separately from hydration errors

Expand output

● hydration-error-count › should display runtime error separately from hydration errors

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `hydration-error-count should display runtime error separately from hydration errors 1`

- Snapshot  - 11
+ Received  + 11

@@ -1,7 +1,18 @@
  [
    {
+     "description": "runtime error",
+     "environmentLabel": null,
+     "label": "Runtime Error",
+     "source": "app/hydration-with-runtime-errors/page.tsx (7:11) @ Page.useEffect
+ >  7 |     throw new Error('runtime error')
+      |           ^",
+     "stack": [
+       "Page.useEffect app/hydration-with-runtime-errors/page.tsx (7:11)",
+     ],
+   },
+   {
      "componentStack": "...
      <OuterLayoutRouter parallelRouterKey="children" template={<RenderFromTemplateContext>}>
        <RenderFromTemplateContext>
          <ScrollAndFocusHandler segmentPath={[...]}>
            <InnerScrollAndFocusHandler segmentPath={[...]} focusAndScrollRef={{apply:false, ...}}>
@@ -36,19 +47,8 @@
  > 12 |       sneaky <p>very sneaky</p>
       |              ^",
      "stack": [
        "p <anonymous> (0:0)",
        "Page app/hydration-with-runtime-errors/page.tsx (12:14)",
-     ],
-   },
-   {
-     "description": "runtime error",
-     "environmentLabel": null,
-     "label": "Runtime Error",
-     "source": "app/hydration-with-runtime-errors/page.tsx (7:11) @ Page.useEffect
- >  7 |     throw new Error('runtime error')
-      |           ^",
-     "stack": [
-       "Page.useEffect app/hydration-with-runtime-errors/page.tsx (7:11)",
      ],
    },
  ]

  163 |     const browser = await next.browser('/hydration-with-runtime-errors')
  164 |
> 165 |     await expect(browser).toDisplayRedbox(`
      |                           ^
  166 |      [
  167 |        {
  168 |          "componentStack": "...

  at Object.toDisplayRedbox (development/app-dir/hydration-error-count/hydration-error-count.test.ts:165:27)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev-turbo test/development/app-dir/owner-stack/owner-stack.test.ts (turbopack)

• app-dir - owner-stack > should log stitched error for SSR errors

Expand output

● app-dir - owner-stack › should log stitched error for SSR errors

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `app-dir - owner-stack should log stitched error for SSR errors 1`

- Snapshot  - 13
+ Received  +  1

- {
-   "description": "ssr error",
-   "environmentLabel": null,
-   "label": "Runtime Error",
-   "source": "app/ssr/page.js (4:9) @ useThrowError
- > 4 |   throw new Error('ssr error')
-     |         ^",
-   "stack": [
-     "useThrowError app/ssr/page.js (4:9)",
-     "useErrorHook app/ssr/page.js (8:3)",
-     "Page app/ssr/page.js (12:3)",
-   ],
- }
+ "Expected Redbox but found no visible one."

  129 |     })
  130 |
> 131 |     await expect(browser).toDisplayRedbox(`
      |                           ^
  132 |      {
  133 |        "description": "ssr error",
  134 |        "environmentLabel": null,

  at Object.toDisplayRedbox (development/app-dir/owner-stack/owner-stack.test.ts:131:27)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/next-image-new/app-dir-localpatterns/test/index.test.ts

• Image localPatterns config > development mode > should block unmatched image does-not-exist
• Image localPatterns config > development mode > should block unmatched image nested-assets-query
• Image localPatterns config > development mode > should block unmatched image nested-blocked
• Image localPatterns config > development mode > should block unmatched image top-level

Expand output

● Image localPatterns config › development mode › should block unmatched image does-not-exist

Expected Redbox but found no visible one.

  56 |     const browser = await webdriver(appPort, page)
  57 |     if (mode === 'dev') {
> 58 |       await assertHasRedbox(browser)
     |       ^
  59 |       expect(await getRedboxHeader(browser)).toMatch(
  60 |         /Invalid src prop (.+) on `next\/image` does not match `images.localPatterns` configured/g
  61 |       )

  at integration/next-image-new/app-dir-localpatterns/test/index.test.ts:58:7

● Image localPatterns config › development mode › should block unmatched image nested-assets-query

Expected Redbox but found no visible one.

  56 |     const browser = await webdriver(appPort, page)
  57 |     if (mode === 'dev') {
> 58 |       await assertHasRedbox(browser)
     |       ^
  59 |       expect(await getRedboxHeader(browser)).toMatch(
  60 |         /Invalid src prop (.+) on `next\/image` does not match `images.localPatterns` configured/g
  61 |       )

  at integration/next-image-new/app-dir-localpatterns/test/index.test.ts:58:7

● Image localPatterns config › development mode › should block unmatched image nested-blocked

Expected Redbox but found no visible one.

  56 |     const browser = await webdriver(appPort, page)
  57 |     if (mode === 'dev') {
> 58 |       await assertHasRedbox(browser)
     |       ^
  59 |       expect(await getRedboxHeader(browser)).toMatch(
  60 |         /Invalid src prop (.+) on `next\/image` does not match `images.localPatterns` configured/g
  61 |       )

  at integration/next-image-new/app-dir-localpatterns/test/index.test.ts:58:7

● Image localPatterns config › development mode › should block unmatched image top-level

Expected Redbox but found no visible one.

  56 |     const browser = await webdriver(appPort, page)
  57 |     if (mode === 'dev') {
> 58 |       await assertHasRedbox(browser)
     |       ^
  59 |       expect(await getRedboxHeader(browser)).toMatch(
  60 |         /Invalid src prop (.+) on `next\/image` does not match `images.localPatterns` configured/g
  61 |       )

  at integration/next-image-new/app-dir-localpatterns/test/index.test.ts:58:7

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/development/app-dir/use-cache-errors/use-cache-errors.test.ts

• use-cache-errors > should show a runtime error when calling the incorrectly used cache function

Expand output

● use-cache-errors › should show a runtime error when calling the incorrectly used cache function

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `use-cache-errors should show a runtime error when calling the incorrectly used cache function 1`

- Snapshot  - 3
+ Received  + 5

  {
    "description": "Attempted to call useStuff() from the server but useStuff is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.",
    "environmentLabel": "Cache",
    "label": "Runtime Error",
-   "source": null,
+   "source": "app/module-with-use-cache.ts (16:18) @ useCachedStuff
+ > 16 |   return useStuff()
+      |                  ^",
    "stack": [
      "<FIXME-file-protocol>",
-     "useCachedStuff rsc:/Cache/webpack-internal:///(action-browser)/app/module-with-use-cache.ts (25:68)",
-     "Page ./app/page.tsx",
+     "useCachedStuff app/module-with-use-cache.ts (16:18)",
+     "Page app/page.tsx (22:10)",
    ],
  }

  39 |     } else if (isRspack) {
  40 |       // TODO: the source is missing and the stack leaks rspack internals
> 41 |       await expect(browser).toDisplayRedbox(`
     |                             ^
  42 |        {
  43 |          "description": "Attempted to call useStuff() from the server but useStuff is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.",
  44 |          "environmentLabel": "Cache",

  at Object.toDisplayRedbox (development/app-dir/use-cache-errors/use-cache-errors.test.ts:41:29)

Read more about building and testing Next.js in contributing.md.

__NEXT_EXPERIMENTAL_PPR=true pnpm test-dev test/e2e/app-dir/dev-overlay/portal-not-affect-parent/portal-not-affect-parent.test.ts (PPR)

• dev-overlay - portal-not-affect-parent > should not affect parent display

Expand output

● dev-overlay - portal-not-affect-parent › should not affect parent display

expect(received).toBe(expected) // Object.is equality

Expected: 200
Received: 150

  20 |     // Before: <#div1 100> <#div2 100> <nextjs-portal 100>
  21 |     // After: <#div1 100> [space-between 100] <#div2 100> <nextjs-portal 0>
> 22 |     expect(rect.x).toBe(200)
     |                    ^
  23 |   })
  24 | })
  25 |

  at Object.toBe (e2e/app-dir/dev-overlay/portal-not-affect-parent/portal-not-affect-parent.test.ts:22:20)

Read more about building and testing Next.js in contributing.md.

__NEXT_EXPERIMENTAL_PPR=true pnpm test-dev test/development/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts (PPR)

• app-dir - owner-stack-invalid-element-type > should catch invalid element from a rsc component
• app-dir - owner-stack-invalid-element-type > should catch invalid element from on ssr client component

Expand output

● app-dir - owner-stack-invalid-element-type › should catch invalid element from a rsc component

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `app-dir - owner-stack-invalid-element-type should catch invalid element from a rsc component 1`

- Snapshot  - 10
+ Received  + 19

- {
-   "description": "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
+ [
+   {
+     "description": "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

  Check the render method of `Inner`.",
-   "environmentLabel": null,
-   "label": "Runtime Error",
-   "source": "app/rsc/page.js (5:10) @ Inner
+     "environmentLabel": null,
+     "label": "Runtime Error",
+     "source": "app/rsc/page.js (5:10) @ Inner
  > 5 |   return <Foo />
      |          ^",
-   "stack": [
-     "Inner app/rsc/page.js (5:10)",
-     "Page app/rsc/page.js (11:7)",
-   ],
- }
+     "stack": [
+       "Inner app/rsc/page.js (5:10)",
+       "Page app/rsc/page.js (11:7)",
+     ],
+   },
+   {
+     "description": "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.",
+     "environmentLabel": null,
+     "label": "Runtime Error",
+     "source": null,
+     "stack": [],
+   },
+ ]

  31 |     const browser = await next.browser('/rsc')
  32 |
> 33 |     await expect(browser).toDisplayRedbox(`
     |                           ^
  34 |      {
  35 |        "description": "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  36 | 

  at Object.toDisplayRedbox (development/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts:33:27)

● app-dir - owner-stack-invalid-element-type › should catch invalid element from on ssr client component

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `app-dir - owner-stack-invalid-element-type should catch invalid element from on ssr client component 1`

- Snapshot  - 14
+ Received  +  1

- {
-   "description": "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
-
- Check the render method of `Inner`.",
-   "environmentLabel": null,
-   "label": "Runtime Error",
-   "source": "app/ssr/page.js (7:10) @ Inner
- >  7 |   return <Foo />
-      |          ^",
-   "stack": [
-     "Inner app/ssr/page.js (7:10)",
-     "Page app/ssr/page.js (13:7)",
-   ],
- }
+ "Expected Redbox but found no visible one."

  52 |     const browser = await next.browser('/ssr')
  53 |
> 54 |     await expect(browser).toDisplayRedbox(`
     |                           ^
  55 |      {
  56 |        "description": "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  57 | 

  at Object.toDisplayRedbox (development/app-dir/owner-stack-invalid-element-type/owner-stack-invalid-element-type.test.ts:54:27)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev-turbo test/e2e/app-dir/dynamic-data/dynamic-data.test.ts (turbopack)

• dynamic-data inside cache scope > displays redbox when accessing dynamic data inside a cache scope
• dynamic-data with dynamic = "error" > displays redbox when dynamic = "error" and dynamic data is read in dev

Expand output

● dynamic-data with dynamic = "error" › displays redbox when dynamic = "error" and dynamic data is read in dev

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `dynamic-data with dynamic = "error" displays redbox when \`dynamic = "error"\` and dynamic data is read in dev 1`

- Snapshot  -  9
+ Received  + 24

- {
-   "description": "Route /cookies with `dynamic = "error"` couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering",
-   "environmentLabel": "Server",
-   "label": "Runtime Error",
-   "source": "app/cookies/page.js (14:24) @ Page
+ [
+   {
+     "description": "Route /cookies with `dynamic = "error"` couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering",
+     "environmentLabel": "Server",
+     "label": "Runtime Error",
+     "source": "app/cookies/page.js (14:24) @ Page
+ > 14 |         {(await cookies()).getAll().map((cookie) => {
+      |                        ^",
+     "stack": [
+       "Page app/cookies/page.js (14:24)",
+     ],
+   },
+   {
+     "description": "Switched to client rendering because the server rendering errored:
+
+ Route /cookies with `dynamic = "error"` couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering",
+     "environmentLabel": null,
+     "label": "Runtime Error",
+     "source": "app/cookies/page.js (14:24) @ Page
  > 14 |         {(await cookies()).getAll().map((cookie) => {
       |                        ^",
-   "stack": [
-     "Page app/cookies/page.js (14:24)",
-   ],
- }
+     "stack": [
+       "Page app/cookies/page.js (14:24)",
+     ],
+   },
+ ]

  177 |       let browser = await next.browser('/cookies?foo=foosearch')
  178 |       try {
> 179 |         await expect(browser).toDisplayRedbox(`
      |                               ^
  180 |          {
  181 |            "description": "Route /cookies with \`dynamic = "error"\` couldn't be rendered statically because it used \`cookies\`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering",
  182 |            "environmentLabel": "Server",

  at Object.toDisplayRedbox (e2e/app-dir/dynamic-data/dynamic-data.test.ts:179:31)

● dynamic-data inside cache scope › displays redbox when accessing dynamic data inside a cache scope

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `dynamic-data inside cache scope displays redbox when accessing dynamic data inside a cache scope 1`

- Snapshot  - 10
+ Received  + 26

- {
-   "description": "Route /cookies used "cookies" inside a function cached with "unstable_cache(...)". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/app/api-reference/functions/unstable_cache",
-   "environmentLabel": "Server",
-   "label": "Runtime Error",
-   "source": "app/cookies/page.js (4:40) @ <anonymous>
+ [
+   {
+     "description": "Route /cookies used "cookies" inside a function cached with "unstable_cache(...)". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/app/api-reference/functions/unstable_cache",
+     "environmentLabel": "Server",
+     "label": "Runtime Error",
+     "source": "app/cookies/page.js (4:40) @ <anonymous>
  > 4 | const cookies = cache(() => nextCookies())
      |                                        ^",
-   "stack": [
-     "<anonymous> app/cookies/page.js (4:40)",
-     "async Page app/cookies/page.js (15:11)",
-   ],
- }
+     "stack": [
+       "<anonymous> app/cookies/page.js (4:40)",
+       "async Page app/cookies/page.js (15:11)",
+     ],
+   },
+   {
+     "description": "Switched to client rendering because the server rendering errored:
+
+ Route /cookies used "cookies" inside a function cached with "unstable_cache(...)". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/app/api-reference/functions/unstable_cache",
+     "environmentLabel": null,
+     "label": "Runtime Error",
+     "source": "app/cookies/page.js (4:40) @ <anonymous>
+ > 4 | const cookies = cache(() => nextCookies())
+     |                                        ^",
+     "stack": [
+       "<anonymous> app/cookies/page.js (4:40)",
+       "async Page app/cookies/page.js (15:11)",
+     ],
+   },
+ ]

  306 |       let browser = await next.browser('/cookies')
  307 |       try {
> 308 |         await expect(browser).toDisplayRedbox(`
      |                               ^
  309 |          {
  310 |            "description": "Route /cookies used "cookies" inside a function cached with "unstable_cache(...)". Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use "cookies" outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/app/api-reference/functions/unstable_cache",
  311 |            "environmentLabel": "Server",

  at Object.toDisplayRedbox (e2e/app-dir/dynamic-data/dynamic-data.test.ts:308:31)

Read more about building and testing Next.js in contributing.md.

__NEXT_EXPERIMENTAL_PPR=true pnpm test-dev test/e2e/app-dir/loader-file-named-export-custom-loader-error/loader-file-named-export-custom-loader-error.test.ts (PPR)

• Error test if the loader file export a named function > in Development > development only > should show the error when using Image component

Expand output

● Error test if the loader file export a named function › in Development › development only › should show the error when using Image component

Expected Redbox but found no visible one.

   6 |
   7 | async function testDev(browser, errorRegex) {
>  8 |   await assertHasRedbox(browser)
     |   ^
   9 |   expect(await getRedboxHeader(browser)).toMatch(errorRegex)
  10 | }
  11 |

  at testDev (e2e/app-dir/loader-file-named-export-custom-loader-error/loader-file-named-export-custom-loader-error.test.ts:8:3)
  at Object.<anonymous> (e2e/app-dir/loader-file-named-export-custom-loader-error/loader-file-named-export-custom-loader-error.test.ts:22:9)

Read more about building and testing Next.js in contributing.md.

__NEXT_EXPERIMENTAL_PPR=true pnpm test-dev test/e2e/app-dir/global-error/with-style-import/index.test.ts (PPR)

• app dir - global error - with style import > should render global error with correct styles

Expand output

● app dir - global error - with style import › should render global error with correct styles

Expected Redbox but found no visible one.

  3 |
  4 | async function testDev(browser, errorRegex) {
> 5 |   await assertHasRedbox(browser)
    |   ^
  6 |   expect(await getRedboxHeader(browser)).toMatch(errorRegex)
  7 | }
  8 |

  at testDev (e2e/app-dir/global-error/with-style-import/index.test.ts:5:3)
  at Object.<anonymous> (e2e/app-dir/global-error/with-style-import/index.test.ts:23:7)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/development/acceptance-app/rsc-runtime-errors.test.ts

• Error overlay - RSC runtime errors > should show runtime errors if invalid server API from node_modules is executed

Expand output

● Error overlay - RSC runtime errors › should show runtime errors if invalid server API from node_modules is executed

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay - RSC runtime errors should show runtime errors if invalid server API from node_modules is executed 1`

- Snapshot  - 11
+ Received  +  1

- {
-   "description": "`cookies` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context",
-   "environmentLabel": null,
-   "label": "Runtime Error",
-   "source": "app/client/page.js (4:16) @ Page
- > 4 |   callServerApi()
-     |                ^",
-   "stack": [
-     "Page app/client/page.js (4:16)",
-   ],
- }
+ "Expected Redbox but found no visible one."

  68 |       `)
  69 |     } else {
> 70 |       await expect(browser).toDisplayRedbox(`
     |                             ^
  71 |        {
  72 |          "description": "\`cookies\` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context",
  73 |          "environmentLabel": null,

  at Object.toDisplayRedbox (development/acceptance-app/rsc-runtime-errors.test.ts:70:29)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts

• error-ignored-frames > should be able to collapse ignored frames in client component
• error-ignored-frames > should be able to collapse ignored frames in interleaved call stack

Expand output

● error-ignored-frames › should be able to collapse ignored frames in client component

Expected Redbox but found no visible one.

  30 |   it('should be able to collapse ignored frames in client component', async () => {
  31 |     const browser = await next.browser('/client')
> 32 |     await assertHasRedbox(browser)
     |     ^
  33 |
  34 |     const defaultStack = await getStackFramesContent(browser)
  35 |     expect(defaultStack).toMatchInlineSnapshot(

  at Object.<anonymous> (development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts:32:5)

● error-ignored-frames › should be able to collapse ignored frames in interleaved call stack

Expected Redbox but found no visible one.

  49 |   it('should be able to collapse ignored frames in interleaved call stack', async () => {
  50 |     const browser = await next.browser('/interleaved')
> 51 |     await assertHasRedbox(browser)
     |     ^
  52 |
  53 |     const defaultStack = await getStackFramesContent(browser)
  54 |     if (isTurbopack) {

  at Object.<anonymous> (development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts:51:5)

Read more about building and testing Next.js in contributing.md.

__NEXT_EXPERIMENTAL_PPR=true pnpm test-dev test/e2e/app-dir/app-basepath/index.test.ts (PPR)

• app dir - basepath > should successfully hard navigate from pages -> app

Expand output

● app dir - basepath › should successfully hard navigate from pages -> app

page.waitForSelector: Timeout 10000ms exceeded.
Call log:
  - waiting for locator('#page-2')

  454 |   waitForElementByCss(selector: string, timeout = 10_000) {
  455 |     return this.startChain(async () => {
> 456 |       const el = await page.waitForSelector(selector, {
      |                             ^
  457 |         timeout,
  458 |         state: 'attached',
  459 |       })

  at waitForSelector (lib/browsers/playwright.ts:456:29)
  at Playwright._chain (lib/browsers/playwright.ts:568:23)
  at Playwright._chain [as startChain] (lib/browsers/playwright.ts:549:17)
  at Playwright.startChain [as waitForElementByCss] (lib/browsers/playwright.ts:455:17)
  at Object.waitForElementByCss (e2e/app-dir/app-basepath/index.test.ts:16:19)

Read more about building and testing Next.js in contributing.md.

pnpm test-start test/production/app-dir/browser-chunks/browser-chunks.test.ts

• browser-chunks > must not bundle any dev overlay into browser chunks

Expand output

● browser-chunks › must not bundle any dev overlay into browser chunks

Did not expect any dev overlay modules in browser chunks.
Found the following dev overlay modules:
  webpack://_N_E/../../src/client/components/react-dev-overlay/pages/hydration-error-state.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-layout/error-overlay-layout.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/utils/parse-component-stack.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/turbopack-info.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/terminal/terminal.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-toolbar/docs-link-button.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/utils/css.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/dialog/dialog-header.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-toolbar/nodejs-inspector-button.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/hydration-diff/diff-view.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/icons/system-icon.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/preferences.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/container/errors.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/icons/thumbs/thumbs-up.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/hooks/use-on-click-outside.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/dialog/styles.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/icons/right-arrow.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/icons/external.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/utils/cx.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay/error-overlay.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-nav/error-overlay-nav.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/overlay/overlay.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-toolbar/copy-stack-trace-button.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/code-frame/parse-code-frame.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/overlay/body-locker.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/use-minimum-loading-time-multiple.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/icons/left-arrow.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/utils/get-error-by-type.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/container/runtime-error/render-error.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/dialog/body.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/utils/use-open-in-editor.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/dialog/index.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/container/runtime-error/index.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/version-staleness-info/version-staleness-info.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/copy-button/index.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/font/font-styles.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-footer/error-feedback/error-feedback.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/utils.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/styles/css-reset.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/styles/dark-theme.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/dev-tools-info.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/icons/dark-icon.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/dialog/header.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/dev-overlay.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/terminal/editor-link.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/toast/styles.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/dialog/dialog.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/icons/collapse-icon.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-footer/error-overlay-footer.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/next-logo.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/styles/colors.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/utils/parse-stack.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/styles/base.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/resizer/index.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-pagination/error-overlay-pagination.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/utils/stack-frame.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/icons/thumbs/thumbs-down.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/pages/react-18-hydration-error-info.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/hot-linked-text/index.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/utils/merge-refs.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/dialog/dialog.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/overlay/styles.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/environment-name-label/environment-name-label.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/code-frame/code-frame.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/dialog/dialog-content.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/hooks/use-delayed-render.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/icons/gear-icon.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/dialog/dialog-body.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/container/build-error.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/app/app-dev-overlay.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/utils/dev-indicator/dev-render-indicator.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/toast/toast.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/error-message/error-message.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/overview/segment-explorer.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/shared.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/overlay/overlay.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/draggable.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/icons/light-icon.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/terminal/index.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-bottom-stack/index.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/container/runtime-error/component-stack-pseudo-html.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/utils/parse-url-from-text.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/shadow-portal.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/fader/index.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/error-overlay-toolbar/error-overlay-toolbar.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/errors/error-type-label/error-type-label.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/overlay/index.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/utils/webpack-module-path.ts
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/icons/file.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/styles/component-styles.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/icons/eye-icon.tsx
webpack://_N_E/../../src/client/components/react-dev-overlay/ui/components/toast/index.tsx

  51 |       )
  52 |
> 53 |       throw new Error(
     |             ^
  54 |         'Did not expect any dev overlay modules in browser chunks.\n' + message
  55 |       )
  56 |     }

  at Object.<anonymous> (production/app-dir/browser-chunks/browser-chunks.test.ts:53:13)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/next-image-new/app-dir/test/index.test.ts

• Image Component Default Tests > development mode > should show invalid src error
• Image Component Default Tests > development mode > should show invalid src error when protocol-relative
• Image Component Default Tests > development mode > should show invalid src with leading space
• Image Component Default Tests > development mode > should show invalid src with trailing space
• Image Component Default Tests > development mode > should show error when string src and placeholder=blur and blurDataURL is missing
• Image Component Default Tests > development mode > should show error when invalid width prop
• Image Component Default Tests > development mode > should show error when invalid Infinity width prop
• Image Component Default Tests > development mode > should show error when invalid height prop
• Image Component Default Tests > development mode > should show error when missing width prop
• Image Component Default Tests > development mode > should show error when missing height prop
• Image Component Default Tests > development mode > should show error when width prop on fill image
• Image Component Default Tests > development mode > should show error when CSS position changed on fill image
• Image Component Default Tests > development mode > should show error when static import and placeholder=blur and blurDataUrl is missing

Expand output

● Image Component Default Tests › development mode › should show invalid src error

Expected Redbox but found no visible one.

  916 |       const browser = await webdriver(appPort, '/invalid-src')
  917 |
> 918 |       await assertHasRedbox(browser)
      |       ^
  919 |       expect(await getRedboxHeader(browser)).toContain(
  920 |         'Invalid src prop (https://google.com/test.png) on `next/image`, hostname "google.com" is not configured under images in your `next.config.js`'
  921 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir/test/index.test.ts:918:7)

● Image Component Default Tests › development mode › should show invalid src error when protocol-relative

Expected Redbox but found no visible one.

  925 |       const browser = await webdriver(appPort, '/invalid-src-proto-relative')
  926 |
> 927 |       await assertHasRedbox(browser)
      |       ^
  928 |       expect(await getRedboxHeader(browser)).toContain(
  929 |         'Failed to parse src "//assets.example.com/img.jpg" on `next/image`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)'
  930 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir/test/index.test.ts:927:7)

● Image Component Default Tests › development mode › should show invalid src with leading space

Expected Redbox but found no visible one.

  933 |     it('should show invalid src with leading space', async () => {
  934 |       const browser = await webdriver(appPort, '/invalid-src-leading-space')
> 935 |       await assertHasRedbox(browser)
      |       ^
  936 |       expect(await getRedboxHeader(browser)).toContain(
  937 |         'Image with src " /test.jpg" cannot start with a space or control character.'
  938 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir/test/index.test.ts:935:7)

● Image Component Default Tests › development mode › should show invalid src with trailing space

Expected Redbox but found no visible one.

  941 |     it('should show invalid src with trailing space', async () => {
  942 |       const browser = await webdriver(appPort, '/invalid-src-trailing-space')
> 943 |       await assertHasRedbox(browser)
      |       ^
  944 |       expect(await getRedboxHeader(browser)).toContain(
  945 |         'Image with src "/test.png " cannot end with a space or control character.'
  946 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir/test/index.test.ts:943:7)

● Image Component Default Tests › development mode › should show error when string src and placeholder=blur and blurDataURL is missing

Expected Redbox but found no visible one.

  950 |       const browser = await webdriver(appPort, '/invalid-placeholder-blur')
  951 |
> 952 |       await assertHasRedbox(browser)
      |       ^
  953 |       expect(await getRedboxHeader(browser)).toContain(
  954 |         `Image with src "/test.png" has "placeholder='blur'" property but is missing the "blurDataURL" property.`
  955 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir/test/index.test.ts:952:7)

● Image Component Default Tests › development mode › should show error when invalid width prop

Expected Redbox but found no visible one.

  959 |       const browser = await webdriver(appPort, '/invalid-width')
  960 |
> 961 |       await assertHasRedbox(browser)
      |       ^
  962 |       expect(await getRedboxHeader(browser)).toContain(
  963 |         `Image with src "/test.jpg" has invalid "width" property. Expected a numeric value in pixels but received "100%".`
  964 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir/test/index.test.ts:961:7)

● Image Component Default Tests › development mode › should show error when invalid Infinity width prop

Expected Redbox but found no visible one.

  968 |       const browser = await webdriver(appPort, '/invalid-Infinity-width')
  969 |
> 970 |       await assertHasRedbox(browser)
      |       ^
  971 |       expect(await getRedboxHeader(browser)).toContain(
  972 |         `Image with src "/test.jpg" has invalid "width" property. Expected a numeric value in pixels but received "Infinity".`
  973 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir/test/index.test.ts:970:7)

● Image Component Default Tests › development mode › should show error when invalid height prop

Expected Redbox but found no visible one.

  977 |       const browser = await webdriver(appPort, '/invalid-height')
  978 |
> 979 |       await assertHasRedbox(browser)
      |       ^
  980 |       expect(await getRedboxHeader(browser)).toContain(
  981 |         `Image with src "/test.jpg" has invalid "height" property. Expected a numeric value in pixels but received "50vh".`
  982 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir/test/index.test.ts:979:7)

● Image Component Default Tests › development mode › should show error when missing width prop

Expected Redbox but found no visible one.

   996 |       const browser = await webdriver(appPort, '/missing-width')
   997 |
>  998 |       await assertHasRedbox(browser)
       |       ^
   999 |       expect(await getRedboxHeader(browser)).toContain(
  1000 |         `Image with src "/test.jpg" is missing required "width" property.`
  1001 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir/test/index.test.ts:998:7)

● Image Component Default Tests › development mode › should show error when missing height prop

Expected Redbox but found no visible one.

  1005 |       const browser = await webdriver(appPort, '/missing-height')
  1006 |
> 1007 |       await assertHasRedbox(browser)
       |       ^
  1008 |       expect(await getRedboxHeader(browser)).toContain(
  1009 |         `Image with src "/test.jpg" is missing required "height" property.`
  1010 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir/test/index.test.ts:1007:7)

● Image Component Default Tests › development mode › should show error when width prop on fill image

Expected Redbox but found no visible one.

  1014 |       const browser = await webdriver(appPort, '/invalid-fill-width')
  1015 |
> 1016 |       await assertHasRedbox(browser)
       |       ^
  1017 |       expect(await getRedboxHeader(browser)).toContain(
  1018 |         `Image with src "/wide.png" has both "width" and "fill" properties.`
  1019 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir/test/index.test.ts:1016:7)

● Image Component Default Tests › development mode › should show error when CSS position changed on fill image

Expected Redbox but found no visible one.

  1023 |       const browser = await webdriver(appPort, '/invalid-fill-position')
  1024 |
> 1025 |       await assertHasRedbox(browser)
       |       ^
  1026 |       expect(await getRedboxHeader(browser)).toContain(
  1027 |         `Image with src "/wide.png" has both "fill" and "style.position" properties. Images with "fill" always use position absolute - it cannot be modified.`
  1028 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir/test/index.test.ts:1025:7)

● Image Component Default Tests › development mode › should show error when static import and placeholder=blur and blurDataUrl is missing

Expected Redbox but found no visible one.

  1035 |       )
  1036 |
> 1037 |       await assertHasRedbox(browser)
       |       ^
  1038 |       expect(await getRedboxHeader(browser)).toMatch(
  1039 |         /Image with src "(.*)bmp" has "placeholder='blur'" property but is missing the "blurDataURL" property/
  1040 |       )

  at Object.<anonymous> (integration/next-image-new/app-dir/test/index.test.ts:1037:7)

Read more about building and testing Next.js in contributing.md.

__NEXT_EXPERIMENTAL_PPR=true pnpm test-dev test/e2e/app-dir/next-after-app-api-usage/index.test.ts (PPR)

• nextjs APIs in after() > request APIs inside after() > cannot be called in a dynamic page
• nextjs APIs in after() > request APIs inside after() > cannot be called in a prerendered page > with dynamic = "error"

Expand output

● nextjs APIs in after() › request APIs inside after() › cannot be called in a dynamic page

expect(received).toContain(expected) // indexOf

Expected substring: "[/request-apis/page-dynamic] nested cookies(): error: Error: Route /request-apis/page-dynamic used \"cookies\" inside \"after(...)\". This is not supported."
Received string:    " ○ Compiling /request-apis/page-dynamic ...
 ✓ Compiled /request-apis/page-dynamic in 9.1s (736 modules)
 GET /request-apis/page-dynamic 200 in 9886ms
[/request-apis/page-dynamic] headers(): error: Error: Route /request-apis/page-dynamic used \"headers\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"headers\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after

  at headers (../../../src/server/request/headers.ts:67:12)
  at eval (../app/request-apis/helpers.js:7:19)
    65 |       !isRequestAPICallableInsideAfter()
    66 |     ) {
  > 67 |       throw new Error(
       |            ^
    68 |         `Route ${workStore.route} used \"headers\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"headers\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after`
    69 |       )
    70 |     }
  [/request-apis/page-dynamic] cookies(): error: Error: Route /request-apis/page-dynamic used \"cookies\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"cookies\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after
  at cookies (../../../src/server/request/cookies.ts:62:12)
  at eval (../app/request-apis/helpers.js:27:19)
  at eval (../app/request-apis/helpers.js:15:10)
    60 |       !isRequestAPICallableInsideAfter()
    61 |     ) {
  > 62 |       throw new Error(
       |            ^
    63 |         // TODO(after): clarify that this only applies to pages?
    64 |         `Route ${workStore.route} used \"cookies\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"cookies\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after`
    65 |       )
  [/request-apis/page-dynamic] connection(): error: Error: Route /request-apis/page-dynamic used \"connection\" inside \"after(...)\". The `connection()` function is used to indicate the subsequent code must only run when there is an actual Request, but \"after(...)\" executes after the request, so this function is not allowed in this scope. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after
  at connection (../../../src/server/request/connection.ts:27:12)
  at eval (../app/request-apis/helpers.js:47:22)
  at eval (../app/request-apis/helpers.js:35:10)
    25 |       !isRequestAPICallableInsideAfter()
    26 |     ) {
  > 27 |       throw new Error(
       |            ^
    28 |         `Route ${workStore.route} used \"connection\" inside \"after(...)\". The \\`connection()\\` function is used to indicate the subsequent code must only run when there is an actual Request, but \"after(...)\" executes after the request, so this function is not allowed in this scope. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after`
    29 |       )
    30 |     }
  [/request-apis/page-dynamic] nested headers(): error: Error: Route /request-apis/page-dynamic used \"headers\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"headers\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after
  at headers (../../../src/server/request/headers.ts:67:12)
  at eval (../app/request-apis/helpers.js:17:21)
  at eval (../app/request-apis/helpers.js:55:10)
    65 |       !isRequestAPICallableInsideAfter()
    66 |     ) {
  > 67 |       throw new Error(
       |            ^
    68 |         `Route ${workStore.route} used \"headers\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"headers\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after`
    69 |       )
    70 |     }
  "
  at toContain (e2e/app-dir/next-after-app-api-usage/index.test.ts:72:22)
  at fn (lib/next-test-utils.ts:811:20)
  at Object.<anonymous> (e2e/app-dir/next-after-app-api-usage/index.test.ts:53:7)

● nextjs APIs in after() › request APIs inside after() › cannot be called in a prerendered page › with dynamic = "error"

expect(received).toContain(expected) // indexOf

Expected substring: "[/request-apis/page-dynamic-error] nested connection(): error: Error: Route /request-apis/page-dynamic-error used \"connection\" inside \"after(...)\"."
Received string:    "[/request-apis/page-dynamic] nested cookies(): error: Error: Route /request-apis/page-dynamic used \"cookies\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"cookies\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after

  at cookies (../../../src/server/request/cookies.ts:62:12)
  at eval (../app/request-apis/helpers.js:37:21)
    60 |       !isRequestAPICallableInsideAfter()
    61 |     ) {
  > 62 |       throw new Error(
       |            ^
    63 |         // TODO(after): clarify that this only applies to pages?
    64 |         `Route ${workStore.route} used \"cookies\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"cookies\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after`
    65 |       )
  [/request-apis/page-dynamic] nested connection(): error: Error: Route /request-apis/page-dynamic used \"connection\" inside \"after(...)\". The `connection()` function is used to indicate the subsequent code must only run when there is an actual Request, but \"after(...)\" executes after the request, so this function is not allowed in this scope. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after
  at connection (../../../src/server/request/connection.ts:27:12)
  at eval (../app/request-apis/helpers.js:57:24)
    25 |       !isRequestAPICallableInsideAfter()
    26 |     ) {
  > 27 |       throw new Error(
       |            ^
    28 |         `Route ${workStore.route} used \"connection\" inside \"after(...)\". The \\`connection()\\` function is used to indicate the subsequent code must only run when there is an actual Request, but \"after(...)\" executes after the request, so this function is not allowed in this scope. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after`
    29 |       )
    30 |     }
   ○ Compiling /request-apis/page-dynamic-error ...
   ✓ Compiled /request-apis/page-dynamic-error in 2.3s (738 modules)
   GET /request-apis/page-dynamic-error 200 in 2899ms
  [/request-apis/page-dynamic-error] headers(): error: Error: Route /request-apis/page-dynamic-error used \"headers\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"headers\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after
  at headers (../../../src/server/request/headers.ts:67:12)
  at eval (../app/request-apis/helpers.js:7:19)
    65 |       !isRequestAPICallableInsideAfter()
    66 |     ) {
  > 67 |       throw new Error(
       |            ^
    68 |         `Route ${workStore.route} used \"headers\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"headers\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after`
    69 |       )
    70 |     }
  [/request-apis/page-dynamic-error] cookies(): error: Error: Route /request-apis/page-dynamic-error used \"cookies\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"cookies\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after
  at cookies (../../../src/server/request/cookies.ts:62:12)
  at eval (../app/request-apis/helpers.js:27:19)
  at eval (../app/request-apis/helpers.js:15:10)
    60 |       !isRequestAPICallableInsideAfter()
    61 |     ) {
  > 62 |       throw new Error(
       |            ^
    63 |         // TODO(after): clarify that this only applies to pages?
    64 |         `Route ${workStore.route} used \"cookies\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"cookies\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after`
    65 |       )
  [/request-apis/page-dynamic-error] connection(): error: Error: Route /request-apis/page-dynamic-error used \"connection\" inside \"after(...)\". The `connection()` function is used to indicate the subsequent code must only run when there is an actual Request, but \"after(...)\" executes after the request, so this function is not allowed in this scope. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after
  at connection (../../../src/server/request/connection.ts:27:12)
  at eval (../app/request-apis/helpers.js:47:22)
  at eval (../app/request-apis/helpers.js:35:10)
    25 |       !isRequestAPICallableInsideAfter()
    26 |     ) {
  > 27 |       throw new Error(
       |            ^
    28 |         `Route ${workStore.route} used \"connection\" inside \"after(...)\". The \\`connection()\\` function is used to indicate the subsequent code must only run when there is an actual Request, but \"after(...)\" executes after the request, so this function is not allowed in this scope. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after`
    29 |       )
    30 |     }
  [/request-apis/page-dynamic-error] nested headers(): error: Error: Route /request-apis/page-dynamic-error used \"headers\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"headers\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after
  at headers (../../../src/server/request/headers.ts:67:12)
  at eval (../app/request-apis/helpers.js:17:21)
  at eval (../app/request-apis/helpers.js:55:10)
    65 |       !isRequestAPICallableInsideAfter()
    66 |     ) {
  > 67 |       throw new Error(
       |            ^
    68 |         `Route ${workStore.route} used \"headers\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"headers\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after`
    69 |       )
    70 |     }
  [/request-apis/page-dynamic-error] nested cookies(): error: Error: Route /request-apis/page-dynamic-error used \"cookies\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"cookies\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after
  at cookies (../../../src/server/request/cookies.ts:62:12)
  at eval (../app/request-apis/helpers.js:37:21)
    60 |       !isRequestAPICallableInsideAfter()
    61 |     ) {
  > 62 |       throw new Error(
       |            ^
    63 |         // TODO(after): clarify that this only applies to pages?
    64 |         `Route ${workStore.route} used \"cookies\" inside \"after(...)\". This is not supported. If you need this data inside an \"after\" callback, use \"cookies\" outside of the callback. See more info here: https://nextjs.org/docs/canary/app/api-reference/functions/after`
    65 |       )
  "
  at toContain (e2e/app-dir/next-after-app-api-usage/index.test.ts:129:24)
  at fn (lib/next-test-utils.ts:811:20)
  at e2e/app-dir/next-after-app-api-usage/index.test.ts:100:9

Read more about building and testing Next.js in contributing.md.

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js sebbie/05-27-_dev-overlay_render_dev_overlay_in_a_different_leaf	Change
buildDuration	19.7s	18.3s	N/A
buildDurationCached	17.1s	14.8s	N/A
nodeModulesSize	428 MB	442 MB	⚠️ +13.9 MB
nextStartRea..uration (ms)	467ms	468ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js sebbie/05-27-_dev-overlay_render_dev_overlay_in_a_different_leaf	Change
1733-HASH.js gzip	44.6 kB	N/A	N/A
194b18f3-HASH.js gzip	53.8 kB	53.8 kB	N/A
2192.HASH.js gzip	169 B	168 B	N/A
4719-HASH.js gzip	5.47 kB	5.45 kB	N/A
framework-HASH.js gzip	57.4 kB	57.4 kB	✓
main-app-HASH.js gzip	254 B	257 B	N/A
main-HASH.js gzip	33.5 kB	33.8 kB	⚠️ +267 B
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
5934-HASH.js gzip	N/A	118 kB	N/A
e64931b3-HASH.js gzip	N/A	53.8 kB	N/A
Overall change	91 kB	91.2 kB	⚠️ +267 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js sebbie/05-27-_dev-overlay_render_dev_overlay_in_a_different_leaf	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/05-27-_dev-overlay_render_dev_overlay_in_a_different_leaf	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	510 B	509 B	N/A
css-HASH.js gzip	344 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	N/A
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	363 B	✓
hooks-HASH.js gzip	392 B	391 B	N/A
image-HASH.js gzip	4.69 kB	4.66 kB	N/A
index-HASH.js gzip	267 B	267 B	✓
link-HASH.js gzip	2.53 kB	2.53 kB	N/A
routerDirect..HASH.js gzip	328 B	327 B	N/A
script-HASH.js gzip	396 B	396 B	✓
withRouter-HASH.js gzip	325 B	325 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	2.11 kB	2.11 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js sebbie/05-27-_dev-overlay_render_dev_overlay_in_a_different_leaf	Change
_buildManifest.js gzip	751 B	751 B	✓
Overall change	751 B	751 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js sebbie/05-27-_dev-overlay_render_dev_overlay_in_a_different_leaf	Change
index.html gzip	529 B	529 B	✓
link.html gzip	540 B	542 B	N/A
withRouter.html gzip	525 B	524 B	N/A
Overall change	529 B	529 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js sebbie/05-27-_dev-overlay_render_dev_overlay_in_a_different_leaf	Change
edge-ssr.js gzip	141 kB	141 kB	N/A
page.js gzip	220 kB	220 kB	N/A
Overall change	0 B	0 B	✓

Middleware size Overall increase ⚠️

	vercel/next.js canary	vercel/next.js sebbie/05-27-_dev-overlay_render_dev_overlay_in_a_different_leaf	Change
middleware-b..fest.js gzip	674 B	689 B	N/A
middleware-r..fest.js gzip	155 B	155 B	✓
middleware.js gzip	32.4 kB	32.5 kB	⚠️ +116 B
edge-runtime..pack.js gzip	853 B	853 B	✓
Overall change	33.4 kB	33.5 kB	⚠️ +116 B

Next Runtimes Overall increase ⚠️

	vercel/next.js canary	vercel/next.js sebbie/05-27-_dev-overlay_render_dev_overlay_in_a_different_leaf	Change
app-page-exp...dev.js gzip	322 kB	424 kB	⚠️ +102 kB
app-page-exp..prod.js gzip	150 kB	150 kB	✓
app-page-tur...dev.js gzip	322 kB	424 kB	⚠️ +102 kB
app-page-tur..prod.js gzip	150 kB	150 kB	✓
app-page-tur...dev.js gzip	313 kB	393 kB	⚠️ +79.7 kB
app-page-tur..prod.js gzip	146 kB	146 kB	✓
app-page.run...dev.js gzip	313 kB	393 kB	⚠️ +79.7 kB
app-page.run..prod.js gzip	146 kB	146 kB	✓
app-route-ex...dev.js gzip	60.5 kB	60.5 kB	✓
app-route-ex..prod.js gzip	39.5 kB	39.5 kB	✓
app-route-tu...dev.js gzip	60.6 kB	60.6 kB	✓
app-route-tu..prod.js gzip	39.5 kB	39.5 kB	✓
app-route-tu...dev.js gzip	60 kB	60 kB	✓
app-route-tu..prod.js gzip	39.1 kB	39.1 kB	✓
app-route.ru...dev.js gzip	59.9 kB	59.9 kB	✓
app-route.ru..prod.js gzip	39.1 kB	39.1 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	30 kB	30 kB	✓
pages-api-tu..prod.js gzip	21.4 kB	21.4 kB	✓
pages-api.ru...dev.js gzip	30 kB	30 kB	✓
pages-api.ru..prod.js gzip	21.4 kB	21.4 kB	✓
pages-turbo....dev.js gzip	43.7 kB	43.7 kB	✓
pages-turbo...prod.js gzip	32 kB	32 kB	✓
pages.runtim...dev.js gzip	43.9 kB	43.9 kB	✓
pages.runtim..prod.js gzip	32.1 kB	32.1 kB	✓
server.runti..prod.js gzip	67.2 kB	67.2 kB	✓
Overall change	2.58 MB	2.95 MB	⚠️ +364 kB

build cache

	vercel/next.js canary	vercel/next.js sebbie/05-27-_dev-overlay_render_dev_overlay_in_a_different_leaf	Change
0.pack gzip	2.49 MB	2.48 MB	N/A
index.pack gzip	79.2 kB	79.1 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for page.js

Diff too large to display

Diff for middleware-b..-manifest.js

@@ -4,97 +4,98 @@ globalThis.__BUILD_MANIFEST = {
   ampDevFiles: [],
   lowPriorityFiles: [],
   rootMainFiles: [
-    "static/chunks/webpack-93c6ad3ef7fdec96.js",
-    "static/chunks/194b18f3-ad0b5faa3f073e8b.js",
-    "static/chunks/1733-8a60991ee6f9a671.js",
-    "static/chunks/main-app-1fd661ee553e877a.js",
+    "static/chunks/webpack-da0948d8ba589361.js",
+    "static/chunks/821c8963-d20f2759aab0aa64.js",
+    "static/chunks/e64931b3-d1423d2ccd7343d7.js",
+    "static/chunks/5934-e0bd6b9417b407b8.js",
+    "static/chunks/main-app-2160a4cd8be64add.js",
   ],
   rootMainFilesTree: {},
   pages: {
     "/": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
-      "static/chunks/pages/index-3f348483acfac6f3.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
+      "static/chunks/pages/index-3bbf9f37b5eb8140.js",
     ],
     "/_app": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
-      "static/chunks/pages/_app-82b6a92e9735c5c4.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
+      "static/chunks/pages/_app-164e4559ef174ca6.js",
     ],
     "/_error": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
-      "static/chunks/pages/_error-7d60494101e7e04b.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
+      "static/chunks/pages/_error-ca8ee97c2e83a291.js",
     ],
     "/amp": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
-      "static/chunks/pages/amp-7a003c8aade6a8ed.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
+      "static/chunks/pages/amp-80fb022b30aa2588.js",
     ],
     "/css": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
       "static/css/ded6b86ab9cc0a1f.css",
-      "static/chunks/pages/css-f4779eb65373d053.js",
+      "static/chunks/pages/css-738173634ce3623b.js",
     ],
     "/dynamic": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
-      "static/chunks/pages/dynamic-2730e2fdcfb7b406.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
+      "static/chunks/pages/dynamic-73ff8bbc4f973f3f.js",
     ],
     "/edge-ssr": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
-      "static/chunks/pages/edge-ssr-5ebc1230b35fc04c.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
+      "static/chunks/pages/edge-ssr-9fe9ba94f9eb965b.js",
     ],
     "/head": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
-      "static/chunks/pages/head-feed0ea90ec62819.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
+      "static/chunks/pages/head-84607c58ce1e9fe7.js",
     ],
     "/hooks": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
-      "static/chunks/pages/hooks-48749230a507023c.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
+      "static/chunks/pages/hooks-cb7f2b56d6425631.js",
     ],
     "/image": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
-      "static/chunks/pages/image-190421452c367c41.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
+      "static/chunks/pages/image-c0ee4eb3171411d1.js",
     ],
     "/link": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
-      "static/chunks/pages/link-66bfaa6ba0bd2f16.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
+      "static/chunks/pages/link-bfe36bef994747dc.js",
     ],
     "/routerDirect": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
-      "static/chunks/pages/routerDirect-54144348ca085143.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
+      "static/chunks/pages/routerDirect-8dbbab648287414d.js",
     ],
     "/script": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
-      "static/chunks/pages/script-f4059c7f529483f6.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
+      "static/chunks/pages/script-288d94ff7c426dae.js",
     ],
     "/withRouter": [
-      "static/chunks/webpack-93c6ad3ef7fdec96.js",
-      "static/chunks/framework-0fd374db6ba8fd9d.js",
-      "static/chunks/main-68ec2182fb993cfd.js",
-      "static/chunks/pages/withRouter-faf7c6b1d5ea77c5.js",
+      "static/chunks/webpack-da0948d8ba589361.js",
+      "static/chunks/framework-25d1493f0675f828.js",
+      "static/chunks/main-15af5e5adb811a43.js",
+      "static/chunks/pages/withRouter-055502021ff2e2a8.js",
     ],
   },
   ampFirstPages: [],

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for amp-HASH.js

@@ -1,17 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [5034],
   {
-    /***/ 3960: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(5313);
-
-      /***/
-    },
-
-    /***/ 5313: /***/ (module, exports, __webpack_require__) => {
+    /***/ 959: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -27,8 +17,8 @@
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(148)
       );
-      const _ampcontextsharedruntime = __webpack_require__(919);
-      const _ampmode = __webpack_require__(1615);
+      const _ampcontextsharedruntime = __webpack_require__(6289);
+      const _ampmode = __webpack_require__(3669);
       function useAmp() {
         // Don't assign the context value to a variable to save bytes
         return (0, _ampmode.isInAmpMode)(
@@ -50,7 +40,7 @@
       /***/
     },
 
-    /***/ 6756: /***/ (
+    /***/ 996: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -63,7 +53,7 @@
         /* harmony export */
       });
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(3960);
+        __webpack_require__(3870);
       /* harmony import */ var next_amp__WEBPACK_IMPORTED_MODULE_0___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_amp__WEBPACK_IMPORTED_MODULE_0__
@@ -81,7 +71,17 @@
       /***/
     },
 
-    /***/ 7252: /***/ (
+    /***/ 3870: /***/ (
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      module.exports = __webpack_require__(959);
+
+      /***/
+    },
+
+    /***/ 8318: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -89,7 +89,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/amp",
         function () {
-          return __webpack_require__(6756);
+          return __webpack_require__(996);
         },
       ]);
       if (false) {
@@ -103,7 +103,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(7252)
+      __webpack_exec__(8318)
     );
     /******/ 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],
   {
-    /***/ 1586: /***/ (
+    /***/ 342: /***/ (module) => {
+      // extracted by mini-css-extract-plugin
+      module.exports = { helloWorld: "css_helloWorld__aUdUq" };
+
+      /***/
+    },
+
+    /***/ 2628: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +16,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/css",
         function () {
-          return __webpack_require__(4362);
+          return __webpack_require__(6221);
         },
       ]);
       if (false) {
@@ -18,14 +25,7 @@
       /***/
     },
 
-    /***/ 4350: /***/ (module) => {
-      // extracted by mini-css-extract-plugin
-      module.exports = { helloWorld: "css_helloWorld__aUdUq" };
-
-      /***/
-    },
-
-    /***/ 4362: /***/ (
+    /***/ 6221: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -39,7 +39,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(5640);
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(4350);
+        __webpack_require__(342);
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -64,7 +64,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(1586)
+      __webpack_exec__(2628)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for dynamic-HASH.js

@@ -1,17 +1,185 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [2291],
   {
-    /***/ 283: /***/ (
-      module,
+    /***/ 1793: /***/ (
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) => {
+      "use strict";
+      /* __next_internal_client_entry_do_not_use__  cjs */
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      Object.defineProperty(exports, "LoadableContext", {
+        enumerable: true,
+        get: function () {
+          return LoadableContext;
+        },
+      });
+      const _interop_require_default = __webpack_require__(1532);
+      const _react = /*#__PURE__*/ _interop_require_default._(
+        __webpack_require__(148)
+      );
+      const LoadableContext = _react.default.createContext(null);
+      if (false) {
+      } //# sourceMappingURL=loadable-context.shared-runtime.js.map
+
+      /***/
+    },
+
+    /***/ 2976: /***/ (
+      __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(6990);
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/dynamic",
+        function () {
+          return __webpack_require__(9671);
+        },
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 3348: /***/ (module, exports, __webpack_require__) => {
+      "use strict";
+
+      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, {
+        /**
+         * This function lets you dynamically import a component.
+         * It uses [React.lazy()](https://react.dev/reference/react/lazy) with [Suspense](https://react.dev/reference/react/Suspense) under the hood.
+         *
+         * Read more: [Next.js Docs: `next/dynamic`](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#nextdynamic)
+         */ default: function () {
+          return dynamic;
+        },
+        noSSR: function () {
+          return noSSR;
+        },
+      });
+      const _interop_require_default = __webpack_require__(1532);
+      const _jsxruntime = __webpack_require__(5640);
+      const _react = /*#__PURE__*/ _interop_require_default._(
+        __webpack_require__(148)
+      );
+      const _loadablesharedruntime = /*#__PURE__*/ _interop_require_default._(
+        __webpack_require__(5779)
+      );
+      const isServerSide = "object" === "undefined";
+      // Normalize loader to return the module as form { default: Component } for `React.lazy`.
+      // Also for backward compatible since next/dynamic allows to resolve a component directly with loader
+      // Client component reference proxy need to be converted to a module.
+      function convertModule(mod) {
+        return {
+          default: (mod == null ? void 0 : mod.default) || mod,
+        };
+      }
+      function noSSR(LoadableInitializer, loadableOptions) {
+        // Removing webpack and modules means react-loadable won't try preloading
+        delete loadableOptions.webpack;
+        delete loadableOptions.modules;
+        // This check is necessary to prevent react-loadable from initializing on the server
+        if (!isServerSide) {
+          return LoadableInitializer(loadableOptions);
+        }
+        const Loading = loadableOptions.loading;
+        // This will only be rendered on the server side
+        return () =>
+          /*#__PURE__*/ (0, _jsxruntime.jsx)(Loading, {
+            error: null,
+            isLoading: true,
+            pastDelay: false,
+            timedOut: false,
+          });
+      }
+      function dynamic(dynamicOptions, options) {
+        let loadableFn = _loadablesharedruntime.default;
+        let loadableOptions = {
+          // A loading component is not required, so we default it
+          loading: (param) => {
+            let { error, isLoading, pastDelay } = param;
+            if (!pastDelay) return null;
+            if (false) {
+            }
+            return null;
+          },
+        };
+        // Support for direct import(), eg: dynamic(import('../hello-world'))
+        // Note that this is only kept for the edge case where someone is passing in a promise as first argument
+        // The react-loadable babel plugin will turn dynamic(import('../hello-world')) into dynamic(() => import('../hello-world'))
+        // To make sure we don't execute the import without rendering first
+        if (dynamicOptions instanceof Promise) {
+          loadableOptions.loader = () => dynamicOptions;
+          // Support for having import as a function, eg: dynamic(() => import('../hello-world'))
+        } else if (typeof dynamicOptions === "function") {
+          loadableOptions.loader = dynamicOptions;
+          // Support for having first argument being options, eg: dynamic({loader: import('../hello-world')})
+        } else if (typeof dynamicOptions === "object") {
+          loadableOptions = {
+            ...loadableOptions,
+            ...dynamicOptions,
+          };
+        }
+        // Support for passing options, eg: dynamic(import('../hello-world'), {loading: () => <p>Loading something</p>})
+        loadableOptions = {
+          ...loadableOptions,
+          ...options,
+        };
+        const loaderFn = loadableOptions.loader;
+        const loader = () =>
+          loaderFn != null
+            ? loaderFn().then(convertModule)
+            : Promise.resolve(convertModule(() => null));
+        // coming from build/babel/plugins/react-loadable-plugin.js
+        if (loadableOptions.loadableGenerated) {
+          loadableOptions = {
+            ...loadableOptions,
+            ...loadableOptions.loadableGenerated,
+          };
+          delete loadableOptions.loadableGenerated;
+        }
+        // support for disabling server side rendering, eg: dynamic(() => import('../hello-world'), {ssr: false}).
+        if (typeof loadableOptions.ssr === "boolean" && !loadableOptions.ssr) {
+          delete loadableOptions.webpack;
+          delete loadableOptions.modules;
+          return noSSR(loadableFn, loadableOptions);
+        }
+        return loadableFn({
+          ...loadableOptions,
+          loader: loader,
+        });
+      }
+      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=dynamic.js.map
 
       /***/
     },
 
-    /***/ 505: /***/ (
+    /***/ 5779: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -53,7 +221,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(148)
       );
-      const _loadablecontextsharedruntime = __webpack_require__(6179);
+      const _loadablecontextsharedruntime = __webpack_require__(1793);
       function resolve(obj) {
         return obj && obj.default ? obj.default : obj;
       }
@@ -288,7 +456,17 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /***/
     },
 
-    /***/ 5703: /***/ (
+    /***/ 9553: /***/ (
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      module.exports = __webpack_require__(3348);
+
+      /***/
+    },
+
+    /***/ 9671: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -303,7 +481,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(5640);
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(283);
+        __webpack_require__(9553);
       /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_dynamic__WEBPACK_IMPORTED_MODULE_1__
@@ -312,12 +490,12 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       const DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
         () =>
           __webpack_require__
-            .e(/* import() */ 2192)
-            .then(__webpack_require__.bind(__webpack_require__, 2192))
+            .e(/* import() */ 6160)
+            .then(__webpack_require__.bind(__webpack_require__, 6160))
             .then((mod) => mod.Hello),
         {
           loadableGenerated: {
-            webpack: () => [/*require.resolve*/ 2192],
+            webpack: () => [/*require.resolve*/ 6160],
           },
         }
       );
@@ -343,191 +521,13 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
 
       /***/
     },
-
-    /***/ 6179: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
-      "use strict";
-      /* __next_internal_client_entry_do_not_use__  cjs */
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "LoadableContext", {
-        enumerable: true,
-        get: function () {
-          return LoadableContext;
-        },
-      });
-      const _interop_require_default = __webpack_require__(1532);
-      const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(148)
-      );
-      const LoadableContext = _react.default.createContext(null);
-      if (false) {
-      } //# sourceMappingURL=loadable-context.shared-runtime.js.map
-
-      /***/
-    },
-
-    /***/ 6990: /***/ (module, exports, __webpack_require__) => {
-      "use strict";
-
-      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, {
-        /**
-         * This function lets you dynamically import a component.
-         * It uses [React.lazy()](https://react.dev/reference/react/lazy) with [Suspense](https://react.dev/reference/react/Suspense) under the hood.
-         *
-         * Read more: [Next.js Docs: `next/dynamic`](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#nextdynamic)
-         */ default: function () {
-          return dynamic;
-        },
-        noSSR: function () {
-          return noSSR;
-        },
-      });
-      const _interop_require_default = __webpack_require__(1532);
-      const _jsxruntime = __webpack_require__(5640);
-      const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(148)
-      );
-      const _loadablesharedruntime = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(505)
-      );
-      const isServerSide = "object" === "undefined";
-      // Normalize loader to return the module as form { default: Component } for `React.lazy`.
-      // Also for backward compatible since next/dynamic allows to resolve a component directly with loader
-      // Client component reference proxy need to be converted to a module.
-      function convertModule(mod) {
-        return {
-          default: (mod == null ? void 0 : mod.default) || mod,
-        };
-      }
-      function noSSR(LoadableInitializer, loadableOptions) {
-        // Removing webpack and modules means react-loadable won't try preloading
-        delete loadableOptions.webpack;
-        delete loadableOptions.modules;
-        // This check is necessary to prevent react-loadable from initializing on the server
-        if (!isServerSide) {
-          return LoadableInitializer(loadableOptions);
-        }
-        const Loading = loadableOptions.loading;
-        // This will only be rendered on the server side
-        return () =>
-          /*#__PURE__*/ (0, _jsxruntime.jsx)(Loading, {
-            error: null,
-            isLoading: true,
-            pastDelay: false,
-            timedOut: false,
-          });
-      }
-      function dynamic(dynamicOptions, options) {
-        let loadableFn = _loadablesharedruntime.default;
-        let loadableOptions = {
-          // A loading component is not required, so we default it
-          loading: (param) => {
-            let { error, isLoading, pastDelay } = param;
-            if (!pastDelay) return null;
-            if (false) {
-            }
-            return null;
-          },
-        };
-        // Support for direct import(), eg: dynamic(import('../hello-world'))
-        // Note that this is only kept for the edge case where someone is passing in a promise as first argument
-        // The react-loadable babel plugin will turn dynamic(import('../hello-world')) into dynamic(() => import('../hello-world'))
-        // To make sure we don't execute the import without rendering first
-        if (dynamicOptions instanceof Promise) {
-          loadableOptions.loader = () => dynamicOptions;
-          // Support for having import as a function, eg: dynamic(() => import('../hello-world'))
-        } else if (typeof dynamicOptions === "function") {
-          loadableOptions.loader = dynamicOptions;
-          // Support for having first argument being options, eg: dynamic({loader: import('../hello-world')})
-        } else if (typeof dynamicOptions === "object") {
-          loadableOptions = {
-            ...loadableOptions,
-            ...dynamicOptions,
-          };
-        }
-        // Support for passing options, eg: dynamic(import('../hello-world'), {loading: () => <p>Loading something</p>})
-        loadableOptions = {
-          ...loadableOptions,
-          ...options,
-        };
-        const loaderFn = loadableOptions.loader;
-        const loader = () =>
-          loaderFn != null
-            ? loaderFn().then(convertModule)
-            : Promise.resolve(convertModule(() => null));
-        // coming from build/babel/plugins/react-loadable-plugin.js
-        if (loadableOptions.loadableGenerated) {
-          loadableOptions = {
-            ...loadableOptions,
-            ...loadableOptions.loadableGenerated,
-          };
-          delete loadableOptions.loadableGenerated;
-        }
-        // support for disabling server side rendering, eg: dynamic(() => import('../hello-world'), {ssr: false}).
-        if (typeof loadableOptions.ssr === "boolean" && !loadableOptions.ssr) {
-          delete loadableOptions.webpack;
-          delete loadableOptions.modules;
-          return noSSR(loadableFn, loadableOptions);
-        }
-        return loadableFn({
-          ...loadableOptions,
-          loader: loader,
-        });
-      }
-      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=dynamic.js.map
-
-      /***/
-    },
-
-    /***/ 9254: /***/ (
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/dynamic",
-        function () {
-          return __webpack_require__(5703);
-        },
-      ]);
-      if (false) {
-      }
-
-      /***/
-    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(9254)
+      __webpack_exec__(2976)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for edge-ssr-HASH.js

@@ -1,7 +1,24 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [676],
   {
-    /***/ 2906: /***/ (
+    /***/ 3690: /***/ (
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/edge-ssr",
+        function () {
+          return __webpack_require__(4378);
+        },
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 4378: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -20,30 +37,13 @@
 
       /***/
     },
-
-    /***/ 7248: /***/ (
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/edge-ssr",
-        function () {
-          return __webpack_require__(2906);
-        },
-      ]);
-      if (false) {
-      }
-
-      /***/
-    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(7248)
+      __webpack_exec__(3690)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for hooks-HASH.js

@@ -1,24 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [9804],
   {
-    /***/ 1664: /***/ (
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/hooks",
-        function () {
-          return __webpack_require__(6130);
-        },
-      ]);
-      if (false) {
-      }
-
-      /***/
-    },
-
-    /***/ 6130: /***/ (
+    /***/ 2786: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -76,13 +59,30 @@
 
       /***/
     },
+
+    /***/ 5426: /***/ (
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/hooks",
+        function () {
+          return __webpack_require__(2786);
+        },
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(1664)
+      __webpack_exec__(5426)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [2983],
   {
-    /***/ 2198: /***/ (
+    /***/ 264: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(3444);
+          return __webpack_require__(1075);
         },
       ]);
       if (false) {
@@ -18,7 +18,307 @@
       /***/
     },
 
-    /***/ 2514: /***/ (
+    /***/ 1075: /***/ (
+      __unused_webpack_module,
+      __webpack_exports__,
+      __webpack_require__
+    ) => {
+      "use strict";
+      // ESM COMPAT FLAG
+      __webpack_require__.r(__webpack_exports__);
+
+      // EXPORTS
+      __webpack_require__.d(__webpack_exports__, {
+        __N_SSP: () => /* binding */ __N_SSP,
+        default: () => /* binding */ pages_image,
+      });
+
+      // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
+      var jsx_runtime = __webpack_require__(5640);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@[email protected][email protected][email protected]/node_modules/next/image.js
+      var next_image = __webpack_require__(3353);
+      var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // ./pages/nextjs.png
+      /* harmony default export */ const nextjs = {
+        src: "/_next/static/media/nextjs.cae0b805.png",
+        height: 1347,
+        width: 1626,
+        blurDataURL:
+          "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAMAAAACh/xsAAAAD1BMVEX////x8fH6+vrb29vo6Oh8o70bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAH0lEQVR4nGNgwARMjIyMjCAGCzMzMwsTRISJCcRABwAEcAAkLCQfgAAAAABJRU5ErkJggg==",
+        blurWidth: 8,
+        blurHeight: 7,
+      }; // ./pages/image.js
+      function ImagePage(props) {
+        return /*#__PURE__*/ (0, jsx_runtime.jsxs)(jsx_runtime.Fragment, {
+          children: [
+            /*#__PURE__*/ (0, jsx_runtime.jsx)("h1", {
+              children: "next/image example",
+            }),
+            /*#__PURE__*/ (0, jsx_runtime.jsx)(image_default(), {
+              src: nextjs,
+              placeholder: "blur",
+            }),
+          ],
+        });
+      }
+      var __N_SSP = true;
+      /* harmony default export */ const pages_image = ImagePage;
+
+      /***/
+    },
+
+    /***/ 1296: /***/ (
+      __unused_webpack_module,
+      exports,
+      __webpack_require__
+    ) => {
+      "use strict";
+
+      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, {
+        default: function () {
+          return _default;
+        },
+        getImageProps: function () {
+          return getImageProps;
+        },
+      });
+      const _interop_require_default = __webpack_require__(1532);
+      const _getimgprops = __webpack_require__(7628);
+      const _imagecomponent = __webpack_require__(8912);
+      const _imageloader = /*#__PURE__*/ _interop_require_default._(
+        __webpack_require__(4104)
+      );
+      function getImageProps(imgProps) {
+        const { props } = (0, _getimgprops.getImgProps)(imgProps, {
+          defaultLoader: _imageloader.default,
+          // This is replaced by webpack define plugin
+          imgConf: {
+            deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+            imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+            path: "/_next/image",
+            loader: "default",
+            dangerouslyAllowSVG: false,
+            unoptimized: false,
+          },
+        });
+        // Normally we don't care about undefined props because we pass to JSX,
+        // but this exported function could be used by the end user for anything
+        // so we delete undefined props to clean it up a little.
+        for (const [key, value] of Object.entries(props)) {
+          if (value === undefined) {
+            delete props[key];
+          }
+        }
+        return {
+          props,
+        };
+      }
+      const _default = _imagecomponent.Image; //# sourceMappingURL=image-external.js.map
+
+      /***/
+    },
+
+    /***/ 2297: /***/ (__unused_webpack_module, exports) => {
+      "use strict";
+      /**
+       * A shared function, used on both client and server, to generate a SVG blur placeholder.
+       */
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      Object.defineProperty(exports, "getImageBlurSvg", {
+        enumerable: true,
+        get: function () {
+          return getImageBlurSvg;
+        },
+      });
+      function getImageBlurSvg(param) {
+        let {
+          widthInt,
+          heightInt,
+          blurWidth,
+          blurHeight,
+          blurDataURL,
+          objectFit,
+        } = param;
+        const std = 20;
+        const svgWidth = blurWidth ? blurWidth * 40 : widthInt;
+        const svgHeight = blurHeight ? blurHeight * 40 : heightInt;
+        const viewBox =
+          svgWidth && svgHeight
+            ? "viewBox='0 0 " + svgWidth + " " + svgHeight + "'"
+            : "";
+        const preserveAspectRatio = viewBox
+          ? "none"
+          : objectFit === "contain"
+          ? "xMidYMid"
+          : objectFit === "cover"
+          ? "xMidYMid slice"
+          : "none";
+        return (
+          "%3Csvg xmlns='http://www.w3.org/2000/svg' " +
+          viewBox +
+          "%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='" +
+          std +
+          "'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='" +
+          std +
+          "'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='" +
+          preserveAspectRatio +
+          "' style='filter: url(%23b);' href='" +
+          blurDataURL +
+          "'/%3E%3C/svg%3E"
+        );
+      } //# sourceMappingURL=image-blur-svg.js.map
+
+      /***/
+    },
+
+    /***/ 3353: /***/ (
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      module.exports = __webpack_require__(1296);
+
+      /***/
+    },
+
+    /***/ 4104: /***/ (__unused_webpack_module, exports) => {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      Object.defineProperty(exports, "default", {
+        enumerable: true,
+        get: function () {
+          return _default;
+        },
+      });
+      const DEFAULT_Q = 75;
+      function defaultLoader(param) {
+        let { config, src, width, quality } = param;
+        var _config_qualities;
+        if (false) {
+        }
+        const q =
+          quality ||
+          ((_config_qualities = config.qualities) == null
+            ? void 0
+            : _config_qualities.reduce((prev, cur) =>
+                Math.abs(cur - DEFAULT_Q) < Math.abs(prev - DEFAULT_Q)
+                  ? cur
+                  : prev
+              )) ||
+          DEFAULT_Q;
+        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
+
+      /***/
+    },
+
+    /***/ 6975: /***/ (module, exports, __webpack_require__) => {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      Object.defineProperty(exports, "useMergedRef", {
+        enumerable: true,
+        get: function () {
+          return useMergedRef;
+        },
+      });
+      const _react = __webpack_require__(148);
+      function useMergedRef(refA, refB) {
+        const cleanupA = (0, _react.useRef)(null);
+        const cleanupB = (0, _react.useRef)(null);
+        // NOTE: In theory, we could skip the wrapping if only one of the refs is non-null.
+        // (this happens often if the user doesn't pass a ref to Link/Form/Image)
+        // But this can cause us to leak a cleanup-ref into user code (e.g. via `<Link legacyBehavior>`),
+        // and the user might pass that ref into ref-merging library that doesn't support cleanup refs
+        // (because it hasn't been updated for React 19)
+        // which can then cause things to blow up, because a cleanup-returning ref gets called with `null`.
+        // So in practice, it's safer to be defensive and always wrap the ref, even on React 19.
+        return (0, _react.useCallback)(
+          (current) => {
+            if (current === null) {
+              const cleanupFnA = cleanupA.current;
+              if (cleanupFnA) {
+                cleanupA.current = null;
+                cleanupFnA();
+              }
+              const cleanupFnB = cleanupB.current;
+              if (cleanupFnB) {
+                cleanupB.current = null;
+                cleanupFnB();
+              }
+            } else {
+              if (refA) {
+                cleanupA.current = applyRef(refA, current);
+              }
+              if (refB) {
+                cleanupB.current = applyRef(refB, current);
+              }
+            }
+          },
+          [refA, refB]
+        );
+      }
+      function applyRef(refA, current) {
+        if (typeof refA === "function") {
+          const cleanup = refA(current);
+          if (typeof cleanup === "function") {
+            return cleanup;
+          } else {
+            return () => refA(null);
+          }
+        } else {
+          refA.current = current;
+          return () => {
+            refA.current = null;
+          };
+        }
+      }
+      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-merged-ref.js.map
+
+      /***/
+    },
+
+    /***/ 7628: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -34,9 +334,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(5127);
-      const _imageblursvg = __webpack_require__(4287);
-      const _imageconfig = __webpack_require__(2795);
+      const _warnonce = __webpack_require__(8373);
+      const _imageblursvg = __webpack_require__(2297);
+      const _imageconfig = __webpack_require__(3165);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -463,188 +763,7 @@
       /***/
     },
 
-    /***/ 3444: /***/ (
-      __unused_webpack_module,
-      __webpack_exports__,
-      __webpack_require__
-    ) => {
-      "use strict";
-      // ESM COMPAT FLAG
-      __webpack_require__.r(__webpack_exports__);
-
-      // EXPORTS
-      __webpack_require__.d(__webpack_exports__, {
-        __N_SSP: () => /* binding */ __N_SSP,
-        default: () => /* binding */ pages_image,
-      });
-
-      // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
-      var jsx_runtime = __webpack_require__(5640);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@[email protected][email protected][email protected]/node_modules/next/image.js
-      var next_image = __webpack_require__(6359);
-      var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // ./pages/nextjs.png
-      /* harmony default export */ const nextjs = {
-        src: "/_next/static/media/nextjs.cae0b805.png",
-        height: 1347,
-        width: 1626,
-        blurDataURL:
-          "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAMAAAACh/xsAAAAD1BMVEX////x8fH6+vrb29vo6Oh8o70bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAH0lEQVR4nGNgwARMjIyMjCAGCzMzMwsTRISJCcRABwAEcAAkLCQfgAAAAABJRU5ErkJggg==",
-        blurWidth: 8,
-        blurHeight: 7,
-      }; // ./pages/image.js
-      function ImagePage(props) {
-        return /*#__PURE__*/ (0, jsx_runtime.jsxs)(jsx_runtime.Fragment, {
-          children: [
-            /*#__PURE__*/ (0, jsx_runtime.jsx)("h1", {
-              children: "next/image example",
-            }),
-            /*#__PURE__*/ (0, jsx_runtime.jsx)(image_default(), {
-              src: nextjs,
-              placeholder: "blur",
-            }),
-          ],
-        });
-      }
-      var __N_SSP = true;
-      /* harmony default export */ const pages_image = ImagePage;
-
-      /***/
-    },
-
-    /***/ 4287: /***/ (__unused_webpack_module, exports) => {
-      "use strict";
-      /**
-       * A shared function, used on both client and server, to generate a SVG blur placeholder.
-       */
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "getImageBlurSvg", {
-        enumerable: true,
-        get: function () {
-          return getImageBlurSvg;
-        },
-      });
-      function getImageBlurSvg(param) {
-        let {
-          widthInt,
-          heightInt,
-          blurWidth,
-          blurHeight,
-          blurDataURL,
-          objectFit,
-        } = param;
-        const std = 20;
-        const svgWidth = blurWidth ? blurWidth * 40 : widthInt;
-        const svgHeight = blurHeight ? blurHeight * 40 : heightInt;
-        const viewBox =
-          svgWidth && svgHeight
-            ? "viewBox='0 0 " + svgWidth + " " + svgHeight + "'"
-            : "";
-        const preserveAspectRatio = viewBox
-          ? "none"
-          : objectFit === "contain"
-          ? "xMidYMid"
-          : objectFit === "cover"
-          ? "xMidYMid slice"
-          : "none";
-        return (
-          "%3Csvg xmlns='http://www.w3.org/2000/svg' " +
-          viewBox +
-          "%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='" +
-          std +
-          "'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='" +
-          std +
-          "'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='" +
-          preserveAspectRatio +
-          "' style='filter: url(%23b);' href='" +
-          blurDataURL +
-          "'/%3E%3C/svg%3E"
-        );
-      } //# sourceMappingURL=image-blur-svg.js.map
-
-      /***/
-    },
-
-    /***/ 4985: /***/ (module, exports, __webpack_require__) => {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "useMergedRef", {
-        enumerable: true,
-        get: function () {
-          return useMergedRef;
-        },
-      });
-      const _react = __webpack_require__(148);
-      function useMergedRef(refA, refB) {
-        const cleanupA = (0, _react.useRef)(null);
-        const cleanupB = (0, _react.useRef)(null);
-        // NOTE: In theory, we could skip the wrapping if only one of the refs is non-null.
-        // (this happens often if the user doesn't pass a ref to Link/Form/Image)
-        // But this can cause us to leak a cleanup-ref into user code (e.g. via `<Link legacyBehavior>`),
-        // and the user might pass that ref into ref-merging library that doesn't support cleanup refs
-        // (because it hasn't been updated for React 19)
-        // which can then cause things to blow up, because a cleanup-returning ref gets called with `null`.
-        // So in practice, it's safer to be defensive and always wrap the ref, even on React 19.
-        return (0, _react.useCallback)(
-          (current) => {
-            if (current === null) {
-              const cleanupFnA = cleanupA.current;
-              if (cleanupFnA) {
-                cleanupA.current = null;
-                cleanupFnA();
-              }
-              const cleanupFnB = cleanupB.current;
-              if (cleanupFnB) {
-                cleanupB.current = null;
-                cleanupFnB();
-              }
-            } else {
-              if (refA) {
-                cleanupA.current = applyRef(refA, current);
-              }
-              if (refB) {
-                cleanupB.current = applyRef(refB, current);
-              }
-            }
-          },
-          [refA, refB]
-        );
-      }
-      function applyRef(refA, current) {
-        if (typeof refA === "function") {
-          const cleanup = refA(current);
-          if (typeof cleanup === "function") {
-            return cleanup;
-          } else {
-            return () => refA(null);
-          }
-        } else {
-          refA.current = current;
-          return () => {
-            refA.current = null;
-          };
-        }
-      }
-      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-merged-ref.js.map
-
-      /***/
-    },
-
-    /***/ 5898: /***/ (module, exports, __webpack_require__) => {
+    /***/ 8912: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -666,17 +785,17 @@
         __webpack_require__(7897)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5207)
+        __webpack_require__(1545)
       );
-      const _getimgprops = __webpack_require__(2514);
-      const _imageconfig = __webpack_require__(2795);
-      const _imageconfigcontextsharedruntime = __webpack_require__(2349);
-      const _warnonce = __webpack_require__(5127);
-      const _routercontextsharedruntime = __webpack_require__(3556);
+      const _getimgprops = __webpack_require__(7628);
+      const _imageconfig = __webpack_require__(3165);
+      const _imageconfigcontextsharedruntime = __webpack_require__(915);
+      const _warnonce = __webpack_require__(8373);
+      const _routercontextsharedruntime = __webpack_require__(2694);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5970)
+        __webpack_require__(4104)
       );
-      const _usemergedref = __webpack_require__(4985);
+      const _usemergedref = __webpack_require__(6975);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -1002,132 +1121,13 @@
 
       /***/
     },
-
-    /***/ 5970: /***/ (__unused_webpack_module, exports) => {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "default", {
-        enumerable: true,
-        get: function () {
-          return _default;
-        },
-      });
-      const DEFAULT_Q = 75;
-      function defaultLoader(param) {
-        let { config, src, width, quality } = param;
-        var _config_qualities;
-        if (false) {
-        }
-        const q =
-          quality ||
-          ((_config_qualities = config.qualities) == null
-            ? void 0
-            : _config_qualities.reduce((prev, cur) =>
-                Math.abs(cur - DEFAULT_Q) < Math.abs(prev - DEFAULT_Q)
-                  ? cur
-                  : prev
-              )) ||
-          DEFAULT_Q;
-        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
-
-      /***/
-    },
-
-    /***/ 6359: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(8986);
-
-      /***/
-    },
-
-    /***/ 8986: /***/ (
-      __unused_webpack_module,
-      exports,
-      __webpack_require__
-    ) => {
-      "use strict";
-
-      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, {
-        default: function () {
-          return _default;
-        },
-        getImageProps: function () {
-          return getImageProps;
-        },
-      });
-      const _interop_require_default = __webpack_require__(1532);
-      const _getimgprops = __webpack_require__(2514);
-      const _imagecomponent = __webpack_require__(5898);
-      const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5970)
-      );
-      function getImageProps(imgProps) {
-        const { props } = (0, _getimgprops.getImgProps)(imgProps, {
-          defaultLoader: _imageloader.default,
-          // This is replaced by webpack define plugin
-          imgConf: {
-            deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-            imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-            path: "/_next/image",
-            loader: "default",
-            dangerouslyAllowSVG: false,
-            unoptimized: false,
-          },
-        });
-        // Normally we don't care about undefined props because we pass to JSX,
-        // but this exported function could be used by the end user for anything
-        // so we delete undefined props to clean it up a little.
-        for (const [key, value] of Object.entries(props)) {
-          if (value === undefined) {
-            delete props[key];
-          }
-        }
-        return {
-          props,
-        };
-      }
-      const _default = _imagecomponent.Image; //# sourceMappingURL=image-external.js.map
-
-      /***/
-    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(2198)
+      __webpack_exec__(264)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for link-HASH.js

@@ -1,107 +1,222 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [4672],
   {
-    /***/ 1854: /***/ (
-      __unused_webpack_module,
-      __webpack_exports__,
-      __webpack_require__
-    ) => {
+    /***/ 1069: /***/ (__unused_webpack_module, exports) => {
       "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__(5640);
-      /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(8770);
-      /* 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;
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      Object.defineProperty(exports, "errorOnce", {
+        enumerable: true,
+        get: function () {
+          return errorOnce;
+        },
+      });
+      let errorOnce = (_) => {};
+      if (false) {
+      } //# sourceMappingURL=error-once.js.map
 
       /***/
     },
 
-    /***/ 3199: /***/ (__unused_webpack_module, exports) => {
+    /***/ 1086: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
-      Object.defineProperty(exports, "errorOnce", {
+      Object.defineProperty(exports, "useIntersection", {
         enumerable: true,
         get: function () {
-          return errorOnce;
+          return useIntersection;
         },
       });
-      let errorOnce = (_) => {};
-      if (false) {
-      } //# sourceMappingURL=error-once.js.map
+      const _react = __webpack_require__(148);
+      const _requestidlecallback = __webpack_require__(7357);
+      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
 
       /***/
     },
 
-    /***/ 3568: /***/ (
-      __unused_webpack_module,
+    /***/ 1148: /***/ (
+      module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/link",
-        function () {
-          return __webpack_require__(1854);
-        },
-      ]);
-      if (false) {
-      }
+      module.exports = __webpack_require__(8093);
 
       /***/
     },
 
-    /***/ 3857: /***/ (module, exports, __webpack_require__) => {
+    /***/ 6975: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
-      Object.defineProperty(exports, "getDomainLocale", {
+      Object.defineProperty(exports, "useMergedRef", {
         enumerable: true,
         get: function () {
-          return getDomainLocale;
+          return useMergedRef;
         },
       });
-      const _normalizetrailingslash = __webpack_require__(4869);
-      const basePath =
-        /* unused pure expression or super */ null && (false || "");
-      function getDomainLocale(path, locale, locales, domainLocales) {
-        if (false) {
+      const _react = __webpack_require__(148);
+      function useMergedRef(refA, refB) {
+        const cleanupA = (0, _react.useRef)(null);
+        const cleanupB = (0, _react.useRef)(null);
+        // NOTE: In theory, we could skip the wrapping if only one of the refs is non-null.
+        // (this happens often if the user doesn't pass a ref to Link/Form/Image)
+        // But this can cause us to leak a cleanup-ref into user code (e.g. via `<Link legacyBehavior>`),
+        // and the user might pass that ref into ref-merging library that doesn't support cleanup refs
+        // (because it hasn't been updated for React 19)
+        // which can then cause things to blow up, because a cleanup-returning ref gets called with `null`.
+        // So in practice, it's safer to be defensive and always wrap the ref, even on React 19.
+        return (0, _react.useCallback)(
+          (current) => {
+            if (current === null) {
+              const cleanupFnA = cleanupA.current;
+              if (cleanupFnA) {
+                cleanupA.current = null;
+                cleanupFnA();
+              }
+              const cleanupFnB = cleanupB.current;
+              if (cleanupFnB) {
+                cleanupB.current = null;
+                cleanupFnB();
+              }
+            } else {
+              if (refA) {
+                cleanupA.current = applyRef(refA, current);
+              }
+              if (refB) {
+                cleanupB.current = applyRef(refB, current);
+              }
+            }
+          },
+          [refA, refB]
+        );
+      }
+      function applyRef(refA, current) {
+        if (typeof refA === "function") {
+          const cleanup = refA(current);
+          if (typeof cleanup === "function") {
+            return cleanup;
+          } else {
+            return () => refA(null);
+          }
         } else {
-          return false;
+          refA.current = current;
+          return () => {
+            refA.current = null;
+          };
         }
       }
       if (
@@ -114,12 +229,12 @@
         });
         Object.assign(exports.default, exports);
         module.exports = exports.default;
-      } //# sourceMappingURL=get-domain-locale.js.map
+      } //# sourceMappingURL=use-merged-ref.js.map
 
       /***/
     },
 
-    /***/ 3947: /***/ (module, exports, __webpack_require__) => {
+    /***/ 8093: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -146,17 +261,17 @@
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
         __webpack_require__(148)
       );
-      const _resolvehref = __webpack_require__(3161);
-      const _islocalurl = __webpack_require__(2309);
-      const _formaturl = __webpack_require__(3768);
-      const _utils = __webpack_require__(5554);
-      const _addlocale = __webpack_require__(7591);
-      const _routercontextsharedruntime = __webpack_require__(3556);
-      const _useintersection = __webpack_require__(5624);
-      const _getdomainlocale = __webpack_require__(3857);
-      const _addbasepath = __webpack_require__(4356);
-      const _usemergedref = __webpack_require__(4985);
-      const _erroronce = __webpack_require__(3199);
+      const _resolvehref = __webpack_require__(2843);
+      const _islocalurl = __webpack_require__(1235);
+      const _formaturl = __webpack_require__(246);
+      const _utils = __webpack_require__(1668);
+      const _addlocale = __webpack_require__(9385);
+      const _routercontextsharedruntime = __webpack_require__(2694);
+      const _useintersection = __webpack_require__(1086);
+      const _getdomainlocale = __webpack_require__(9083);
+      const _addbasepath = __webpack_require__(2386);
+      const _usemergedref = __webpack_require__(6975);
+      const _erroronce = __webpack_require__(1069);
       const prefetched = new Set();
       function prefetch(router, href, as, options) {
         if (false) {
@@ -545,67 +660,25 @@
       /***/
     },
 
-    /***/ 4985: /***/ (module, exports, __webpack_require__) => {
+    /***/ 9083: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
-      Object.defineProperty(exports, "useMergedRef", {
+      Object.defineProperty(exports, "getDomainLocale", {
         enumerable: true,
         get: function () {
-          return useMergedRef;
+          return getDomainLocale;
         },
       });
-      const _react = __webpack_require__(148);
-      function useMergedRef(refA, refB) {
-        const cleanupA = (0, _react.useRef)(null);
-        const cleanupB = (0, _react.useRef)(null);
-        // NOTE: In theory, we could skip the wrapping if only one of the refs is non-null.
-        // (this happens often if the user doesn't pass a ref to Link/Form/Image)
-        // But this can cause us to leak a cleanup-ref into user code (e.g. via `<Link legacyBehavior>`),
-        // and the user might pass that ref into ref-merging library that doesn't support cleanup refs
-        // (because it hasn't been updated for React 19)
-        // which can then cause things to blow up, because a cleanup-returning ref gets called with `null`.
-        // So in practice, it's safer to be defensive and always wrap the ref, even on React 19.
-        return (0, _react.useCallback)(
-          (current) => {
-            if (current === null) {
-              const cleanupFnA = cleanupA.current;
-              if (cleanupFnA) {
-                cleanupA.current = null;
-                cleanupFnA();
-              }
-              const cleanupFnB = cleanupB.current;
-              if (cleanupFnB) {
-                cleanupB.current = null;
-                cleanupFnB();
-              }
-            } else {
-              if (refA) {
-                cleanupA.current = applyRef(refA, current);
-              }
-              if (refB) {
-                cleanupB.current = applyRef(refB, current);
-              }
-            }
-          },
-          [refA, refB]
-        );
-      }
-      function applyRef(refA, current) {
-        if (typeof refA === "function") {
-          const cleanup = refA(current);
-          if (typeof cleanup === "function") {
-            return cleanup;
-          } else {
-            return () => refA(null);
-          }
+      const _normalizetrailingslash = __webpack_require__(5387);
+      const basePath =
+        /* unused pure expression or super */ null && (false || "");
+      function getDomainLocale(path, locale, locales, domainLocales) {
+        if (false) {
         } else {
-          refA.current = current;
-          return () => {
-            refA.current = null;
-          };
+          return false;
         }
       }
       if (
@@ -618,143 +691,70 @@
         });
         Object.assign(exports.default, exports);
         module.exports = exports.default;
-      } //# sourceMappingURL=use-merged-ref.js.map
+      } //# sourceMappingURL=get-domain-locale.js.map
 
       /***/
     },
 
-    /***/ 5624: /***/ (module, exports, __webpack_require__) => {
+    /***/ 9217: /***/ (
+      __unused_webpack_module,
+      __webpack_exports__,
+      __webpack_require__
+    ) => {
       "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "useIntersection", {
-        enumerable: true,
-        get: function () {
-          return useIntersection;
-        },
+      __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 */
       });
-      const _react = __webpack_require__(148);
-      const _requestidlecallback = __webpack_require__(3543);
-      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
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
+        __webpack_require__(5640);
+      /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ =
+        __webpack_require__(1148);
+      /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default =
+        /*#__PURE__*/ __webpack_require__.n(
+          next_link__WEBPACK_IMPORTED_MODULE_1__
         );
-        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,
+
+      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 /",
+              }
+            ),
+          ],
         });
-        Object.assign(exports.default, exports);
-        module.exports = exports.default;
-      } //# sourceMappingURL=use-intersection.js.map
+      }
+      var __N_SSP = true;
+      /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = aLink;
 
       /***/
     },
 
-    /***/ 8770: /***/ (
-      module,
+    /***/ 9666: /***/ (
+      __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(3947);
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/link",
+        function () {
+          return __webpack_require__(9217);
+        },
+      ]);
+      if (false) {
+      }
 
       /***/
     },
@@ -764,7 +764,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(3568)
+      __webpack_exec__(9666)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for routerDirect-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [188],
   {
-    /***/ 3618: /***/ (
+    /***/ 738: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -16,7 +16,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(5640);
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(4631);
+        __webpack_require__(9413);
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_router__WEBPACK_IMPORTED_MODULE_1__
@@ -36,17 +36,7 @@
       /***/
     },
 
-    /***/ 4631: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(7086);
-
-      /***/
-    },
-
-    /***/ 7824: /***/ (
+    /***/ 1810: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -54,7 +44,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/routerDirect",
         function () {
-          return __webpack_require__(3618);
+          return __webpack_require__(738);
         },
       ]);
       if (false) {
@@ -62,13 +52,23 @@
 
       /***/
     },
+
+    /***/ 9413: /***/ (
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      module.exports = __webpack_require__(6988);
+
+      /***/
+    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(7824)
+      __webpack_exec__(1810)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for script-HASH.js

@@ -1,7 +1,17 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [1209],
   {
-    /***/ 1984: /***/ (
+    /***/ 2227: /***/ (
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      module.exports = __webpack_require__(5346);
+
+      /***/
+    },
+
+    /***/ 3642: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +19,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/script",
         function () {
-          return __webpack_require__(5769);
+          return __webpack_require__(6585);
         },
       ]);
       if (false) {
@@ -18,7 +28,7 @@
       /***/
     },
 
-    /***/ 5769: /***/ (
+    /***/ 6585: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -33,7 +43,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(5640);
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(8293);
+        __webpack_require__(2227);
       /* harmony import */ var next_script__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_script__WEBPACK_IMPORTED_MODULE_1__
@@ -65,23 +75,13 @@
 
       /***/
     },
-
-    /***/ 8293: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(900);
-
-      /***/
-    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(1984)
+      __webpack_exec__(3642)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for withRouter-HASH.js

@@ -1,17 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [3263],
   {
-    /***/ 4631: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(7086);
-
-      /***/
-    },
-
-    /***/ 9216: /***/ (
+    /***/ 3962: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -19,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/withRouter",
         function () {
-          return __webpack_require__(9803);
+          return __webpack_require__(7419);
         },
       ]);
       if (false) {
@@ -28,7 +18,7 @@
       /***/
     },
 
-    /***/ 9803: /***/ (
+    /***/ 7419: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -43,7 +33,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(5640);
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(4631);
+        __webpack_require__(9413);
       /* harmony import */ var next_router__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_router__WEBPACK_IMPORTED_MODULE_1__
@@ -61,13 +51,23 @@
 
       /***/
     },
+
+    /***/ 9413: /***/ (
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      module.exports = __webpack_require__(6988);
+
+      /***/
+    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(9216)
+      __webpack_exec__(3962)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 1733-HASH.js

deleted

Diff for 4719-HASH.js

Diff too large to display

Diff for 5934-HASH.js

failed to diff

Diff for e64931b3-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for main-app-HASH.js

@@ -1,64 +1,64 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [4977],
   {
-    /***/ 3505: /***/ () => {
-      /* (ignored) */
-      /***/
-    },
-
-    /***/ 4276: /***/ (
+    /***/ 3506: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 8790, 23)
+        __webpack_require__.t.bind(__webpack_require__, 1598, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 7382, 23)
+        __webpack_require__.t.bind(__webpack_require__, 3662, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 9442, 23)
+        __webpack_require__.t.bind(__webpack_require__, 5850, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 94, 23)
+        __webpack_require__.t.bind(__webpack_require__, 7942, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 693, 23)
+        __webpack_require__.t.bind(__webpack_require__, 8173, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 2439, 23)
+        __webpack_require__.t.bind(__webpack_require__, 8431, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 5083, 23)
+        __webpack_require__.t.bind(__webpack_require__, 9203, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 8103, 23)
+        __webpack_require__.t.bind(__webpack_require__, 8015, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 5625, 23)
+        __webpack_require__.t.bind(__webpack_require__, 4897, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 4247, 23)
+        __webpack_require__.t.bind(__webpack_require__, 6671, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 5602, 23)
+        __webpack_require__.t.bind(__webpack_require__, 9482, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 227, 23)
+        __webpack_require__.t.bind(__webpack_require__, 8635, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 6734, 23)
+        __webpack_require__.t.bind(__webpack_require__, 8886, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.t.bind(__webpack_require__, 4120, 23)
+        __webpack_require__.t.bind(__webpack_require__, 5312, 23)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 6104)
+        __webpack_require__.bind(__webpack_require__, 2336)
       );
 
       /***/
     },
+
+    /***/ 3579: /***/ () => {
+      /* (ignored) */
+      /***/
+    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
@@ -66,8 +66,8 @@
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(
       0,
-      [1305, 1733],
-      () => (__webpack_exec__(9679), __webpack_exec__(4276))
+      [6985, 9910, 5934],
+      () => (__webpack_exec__(7815), __webpack_exec__(3506))
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page-tur..ntime.dev.js

failed to diff

Diff for app-page-tur..ntime.dev.js

failed to diff

Diff for app-page.runtime.dev.js

failed to diff

Commit: c26f093

[eps1lon]

This is the starting point. The dispatcher is moved outside of this React Root in preparation of rendering <AppDevOverlay /> in a separate root. I moved the dispatcher outside of this React Root here since AppDevOverlayErrorBoundary already doesn't have access to the dispatch of AppDevOverlay