[dynamicIO] Disallow sync IO in Server Components

[gnoff]

Prior to this change sync IO had special warnings if you used it and no shell was produced but it wasn't specifically considered an error on it's own. This change makes it so that if any sync IO is detected during Server rendering you must explicitly cache it or guard against it using await connection().

The rationale is that caching in RSC is such an important concept b/c it will control whether you have a static page, and how much of your page is prerenderable, that we do not want the early termination of the prerender to unecessarily degrade your prerendered experience.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 00f68ef

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

[ijjk]

Failing test suites

Commit: 00f68ef

pnpm test-start-turbo test/e2e/app-dir/dynamic-io/dynamic-io.connection.test.ts (turbopack)

• dynamic-io > should partially prerender pages that use connection
• dynamic-io > should be able to pass connection as a promise to another component and trigger an intermediate Suspense boundary

Expand output

● dynamic-io › should partially prerender pages that use connection

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › should be able to pass connection as a promise to another component and trigger an intermediate Suspense boundary

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

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

pnpm test-start-turbo test/e2e/app-dir/dynamic-io/dynamic-io.params.test.ts (turbopack)

• dynamic-io > Async Params > should partially prerender pages that await params in a server components
• dynamic-io > Async Params > should partially prerender pages that use params in a client components
• dynamic-io > Async Params > should fully prerender pages that check individual param keys after awaiting params in a server component
• dynamic-io > Async Params > should fully prerender pages that check individual param keys after useing params in a client component
• dynamic-io > Async Params > should partially prerender pages that spread awaited params in a server component
• dynamic-io > Async Params > should partially prerender pages that spread useed params in a client component
• dynamic-io > Param Shadowing > should correctly allow param names like then, value, and status when awaiting params in a server component
• dynamic-io > Param Shadowing > should correctly allow param names like then, value, and status when useing params in a client component
• dynamic-io > Param Shadowing > should not allow param names like then and status when accessing params directly in a server component
• dynamic-io > Param Shadowing > should not allow param names like then and status when accessing params directly in a client component
• dynamic-io > Synchronous Params access > should partially prerender pages that access params synchronously in a server components
• dynamic-io > Synchronous Params access > should partially prerender pages that access params synchronously in a client components
• dynamic-io > Synchronous Params access > should fully prerender pages that check individual param keys directly on the params prop in a server component
• dynamic-io > Synchronous Params access > should fully prerender pages that check individual param keys directly on the params prop in a client component
• dynamic-io > Synchronous Params access > should partially prerender pages that spread params without awaiting first in a server component
• dynamic-io > Synchronous Params access > should partially prerender pages that spread params without useing them first in a client component

Expand output

● dynamic-io › Async Params › should partially prerender pages that await params in a server components

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Async Params › should partially prerender pages that use params in a client components

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Async Params › should fully prerender pages that check individual param keys after awaiting params in a server component

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Async Params › should fully prerender pages that check individual param keys after useing params in a client component

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Async Params › should partially prerender pages that spread awaited params in a server component

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Async Params › should partially prerender pages that spread useed params in a client component

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Synchronous Params access › should partially prerender pages that access params synchronously in a server components

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Synchronous Params access › should partially prerender pages that access params synchronously in a client components

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Synchronous Params access › should fully prerender pages that check individual param keys directly on the params prop in a server component

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Synchronous Params access › should fully prerender pages that check individual param keys directly on the params prop in a client component

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Synchronous Params access › should partially prerender pages that spread params without awaiting first in a server component

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Synchronous Params access › should partially prerender pages that spread params without useing them first in a client component

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Param Shadowing › should correctly allow param names like then, value, and status when awaiting params in a server component

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Param Shadowing › should correctly allow param names like then, value, and status when useing params in a client component

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Param Shadowing › should not allow param names like then and status when accessing params directly in a server component

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › Param Shadowing › should not allow param names like then and status when accessing params directly in a client component

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › generateStaticParams › should have dynamicIO semantics inside generateStaticParams

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

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

pnpm test-start-turbo test/e2e/app-dir/dynamic-io/dynamic-io.headers.test.ts (turbopack)

• dynamic-io > should partially prerender pages that use async headers
• dynamic-io > should partially prerender pages that use sync headers
• dynamic-io > should be able to pass headers as a promise to another component and trigger an intermediate Suspense boundary
• dynamic-io > should be able to access headers properties asynchronously
• dynamic-io > should be able to access headers properties synchronously

Expand output

● dynamic-io › should partially prerender pages that use async headers

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › should partially prerender pages that use sync headers

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › should be able to pass headers as a promise to another component and trigger an intermediate Suspense boundary

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › should be able to access headers properties asynchronously

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● dynamic-io › should be able to access headers properties synchronously

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

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

pnpm test-start-turbo test/e2e/app-dir/dynamic-io-errors/dynamic-io-errors.platform-dynamic.test.ts (turbopack)

• Dynamic IO Errors - With Minification > Sync Dynamic - With Fallback - Math.random() > should not error the build when calling Math.random() if all dynamic access is inside a Suspense boundary
• Dynamic IO Errors - Without Minification > Sync Dynamic - With Fallback - Math.random() > should not error the build when calling Math.random() if all dynamic access is inside a Suspense boundary

Expand output

● Dynamic IO Errors - With Minification › Sync Dynamic - With Fallback - Math.random() › should not error the build when calling Math.random() if all dynamic access is inside a Suspense boundary

expected build not to fail for fully static project

  71 |           await next.start()
  72 |         } catch {
> 73 |           throw new Error('expected build not to fail for fully static project')
     |                 ^
  74 |         }
  75 |
  76 |         expect(next.cliOutput).toContain('◐ / ')

  at Object.<anonymous> (e2e/app-dir/dynamic-io-errors/dynamic-io-errors.platform-dynamic.test.ts:73:17)

● Dynamic IO Errors - Without Minification › Sync Dynamic - With Fallback - Math.random() › should not error the build when calling Math.random() if all dynamic access is inside a Suspense boundary

expected build not to fail for fully static project

  71 |           await next.start()
  72 |         } catch {
> 73 |           throw new Error('expected build not to fail for fully static project')
     |                 ^
  74 |         }
  75 |
  76 |         expect(next.cliOutput).toContain('◐ / ')

  at Object.<anonymous> (e2e/app-dir/dynamic-io-errors/dynamic-io-errors.platform-dynamic.test.ts:73:17)

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

pnpm test-start-turbo test/e2e/app-dir/dynamic-io/dynamic-io.draft-mode.test.ts (turbopack)

• dynamic-io > should fully prerender pages that use draftMode

Expand output

● dynamic-io › should fully prerender pages that use draftMode

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

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

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

• dynamic-io > should be able to access cookie properties synchronously

Expand output

● dynamic-io › should be able to access cookie properties synchronously

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

Expected: 16
Received: 15

  218 |
  219 |     if (isNextDev) {
> 220 |       expect(i).toBe(cookieWarnings.length)
      |                 ^
  221 |     }
  222 |   })
  223 | })

  at Object.toBe (e2e/app-dir/dynamic-io/dynamic-io.cookies.test.ts:220:17)

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

__NEXT_EXPERIMENTAL_PPR=true pnpm test-start test/e2e/app-dir/node-extensions/node-extensions.random.test.ts (PPR)

• Node Extensions > Random > Dynamic IO > should not error when accessing middlware that use Math.random()
• Node Extensions > Random > Dynamic IO > should not error when accessing pages that use Math.random() in App Router
• Node Extensions > Random > Dynamic IO > should not error when accessing routes that use Math.random() in App Router
• Node Extensions > Random > Dynamic IO > should not error when accessing pages that use Math.random() in Pages Router
• Node Extensions > Random > Dynamic IO > should not error when accessing routes that use Math.random() in Pages Router

Expand output

● Node Extensions › Random › Dynamic IO › should not error when accessing middlware that use Math.random()

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● Node Extensions › Random › Dynamic IO › should not error when accessing pages that use Math.random() in App Router

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● Node Extensions › Random › Dynamic IO › should not error when accessing routes that use Math.random() in App Router

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● Node Extensions › Random › Dynamic IO › should not error when accessing pages that use Math.random() in Pages Router

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

● Node Extensions › Random › Dynamic IO › should not error when accessing routes that use Math.random() in Pages Router

next build failed with code/signal 1

  106 |           if (code || signal)
  107 |             reject(
> 108 |               new Error(`next build failed with code/signal ${code || signal}`)
      |               ^
  109 |             )
  110 |           else resolve()
  111 |         })

  at ChildProcess.<anonymous> (lib/next-modes/next-start.ts:108:15)

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

pnpm test-dev test/e2e/app-dir/dynamic-io/dynamic-io.search.test.ts

• dynamic-io > should partially prerender pages that access a searchParam property synchronously in a server component
• dynamic-io > should partially prerender pages that checks for the existence of a searchParam property synchronously in a server component
• dynamic-io > should partially prerender pages that spreads ...searchParam synchronously in a server component

Expand output

● dynamic-io › should partially prerender pages that access a searchParam property synchronously in a server component

expect(received).toEqual(expected) // deep equality

- Expected  - 0
+ Received  + 1

  Array [
    StringContaining "`searchParams.sentinel`",
+   "Error: Route \"/search/sync/server/access\" used `searchParams.sentinel`. `searchParams` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis",
  ]

  77 |       expect($('#value').text()).toBe('hello')
  78 |       expect($('#page').text()).toBe('at runtime')
> 79 |       expect(searchWarnings).toEqual([
     |                              ^
  80 |         expect.stringContaining('`searchParams.sentinel`'),
  81 |       ])
  82 |     } else {

  at Object.toEqual (e2e/app-dir/dynamic-io/dynamic-io.search.test.ts:79:30)

● dynamic-io › should partially prerender pages that checks for the existence of a searchParam property synchronously in a server component

expect(received).toEqual(expected) // deep equality

- Expected  - 0
+ Received  + 1

  Array [
    StringContaining "`Reflect.has(searchParams, \"sentinel\")`, `\"sentinel\" in searchParams`, or similar",
    StringContaining "`Reflect.has(searchParams, \"foo\")`, `\"foo\" in searchParams`, or similar",
+   "Error: Route \"/search/sync/server/has\" used `Reflect.has(searchParams, \"sentinel\")`, `\"sentinel\" in searchParams`, or similar. `searchParams` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis",
  ]

  120 |       expect($('#has-foo').text()).toBe('false')
  121 |       expect($('#page').text()).toBe('at runtime')
> 122 |       expect(searchWarnings).toEqual([
      |                              ^
  123 |         expect.stringContaining(
  124 |           '`Reflect.has(searchParams, "sentinel")`, `"sentinel" in searchParams`, or similar'
  125 |         ),

  at Object.toEqual (e2e/app-dir/dynamic-io/dynamic-io.search.test.ts:122:30)

● dynamic-io › should partially prerender pages that spreads ...searchParam synchronously in a server component

expect(received).toEqual(expected) // deep equality

- Expected  - 0
+ Received  + 1

  Array [
    StringContaining "conflict with builtin or well-known property names: `then`",
+   "Error: Route \"/search/sync/server/spread\" used `{...searchParams}`, `Object.keys(searchParams)`, or similar. `searchParams` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis",
  ]

  180 |       expect($('#value-value').text()).toBe('baz')
  181 |       expect($('#page').text()).toBe('at runtime')
> 182 |       expect(searchWarnings).toEqual([
      |                              ^
  183 |         expect.stringContaining(
  184 |           'conflict with builtin or well-known property names: `then`'
  185 |         ),

  at Object.toEqual (e2e/app-dir/dynamic-io/dynamic-io.search.test.ts:182:30)

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

__NEXT_EXPERIMENTAL_PPR=true pnpm test-dev test/development/acceptance-app/undefined-default-export.test.ts (PPR)

• Undefined default export > should error when page component export is not valid

Expand output

● Undefined default export › should error when page component export is not valid

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

  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 (development/acceptance-app/undefined-default-export.test.ts:93:19)

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

__NEXT_EXPERIMENTAL_PPR=true pnpm test-dev test/e2e/app-dir/actions/app-action-node-middleware.test.ts (PPR)

• app-dir action handling > fetch actions > should handle redirects to routes that provide an invalid RSC response

Expand output

● app-dir action handling › fetch actions › should handle redirects to routes that provide an invalid RSC response

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

Expected substring: "Hello from a pages route"
Received string:    "0.718156570051067
Client
Server
Client and Server
0
+1+1 (Slow)-1*2
redirect to a pages route
submit
test"

  1320 |
  1321 |       await retry(async () => {
> 1322 |         expect(await browser.elementByCss('body').text()).toContain(
       |                                                           ^
  1323 |           'Hello from a pages route'
  1324 |         )
  1325 |         expect(await browser.url()).toBe(`${next.url}/pages-dir`)

  at toContain (e2e/app-dir/actions/app-action.test.ts:1322:59)
  at retry (lib/next-test-utils.ts:811:14)
  at Object.<anonymous> (e2e/app-dir/actions/app-action.test.ts:1321:7)

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	gnoff/next.js always-ban-sync-io-in-server	Change
buildDuration	22.2s	20.1s	N/A
buildDurationCached	18.9s	16.5s	N/A
nodeModulesSize	428 MB	428 MB	⚠️ +13.3 kB
nextStartRea..uration (ms)	533ms	482ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	gnoff/next.js always-ban-sync-io-in-server	Change
1733-HASH.js gzip	44.5 kB	45 kB	⚠️ +470 B
194b18f3-HASH.js gzip	53.8 kB	53.8 kB	N/A
2192.HASH.js gzip	169 B	169 B	✓
4719-HASH.js gzip	5.47 kB	5.44 kB	N/A
framework-HASH.js gzip	57.4 kB	57.4 kB	✓
main-app-HASH.js gzip	253 B	256 B	N/A
main-HASH.js gzip	33.5 kB	33.6 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	102 kB	103 kB	⚠️ +470 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	gnoff/next.js always-ban-sync-io-in-server	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	gnoff/next.js always-ban-sync-io-in-server	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	510 B	510 B	✓
css-HASH.js gzip	344 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.83 kB	N/A
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	364 B	N/A
hooks-HASH.js gzip	392 B	391 B	N/A
image-HASH.js gzip	4.69 kB	4.67 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	325 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.25 kB	2.25 kB	✓

Client Build Manifests

	vercel/next.js canary	gnoff/next.js always-ban-sync-io-in-server	Change
_buildManifest.js gzip	751 B	750 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	gnoff/next.js always-ban-sync-io-in-server	Change
index.html gzip	530 B	530 B	✓
link.html gzip	540 B	541 B	N/A
withRouter.html gzip	524 B	524 B	✓
Overall change	1.05 kB	1.05 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	gnoff/next.js always-ban-sync-io-in-server	Change
edge-ssr.js gzip	141 kB	140 kB	N/A
page.js gzip	220 kB	214 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	gnoff/next.js always-ban-sync-io-in-server	Change
middleware-b..fest.js gzip	676 B	677 B	N/A
middleware-r..fest.js gzip	155 B	157 B	N/A
middleware.js gzip	32.5 kB	32.5 kB	N/A
edge-runtime..pack.js gzip	853 B	853 B	✓
Overall change	853 B	853 B	✓

Next Runtimes

	vercel/next.js canary	gnoff/next.js always-ban-sync-io-in-server	Change
app-page-exp...dev.js gzip	322 kB	322 kB	N/A
app-page-exp..prod.js gzip	150 kB	150 kB	N/A
app-page-tur...dev.js gzip	322 kB	322 kB	N/A
app-page-tur..prod.js gzip	150 kB	150 kB	✓
app-page-tur...dev.js gzip	313 kB	313 kB	N/A
app-page-tur..prod.js gzip	146 kB	146 kB	✓
app-page.run...dev.js gzip	313 kB	313 kB	N/A
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 kB	67.1 kB	N/A
Overall change	1.1 MB	1.1 MB	✓

build cache

	vercel/next.js canary	gnoff/next.js always-ban-sync-io-in-server	Change
0.pack gzip	2.49 MB	2.49 MB	N/A
index.pack gzip	78.6 kB	77.8 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

failed to diff

Diff for css-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [9813],
   {
-    /***/ 1586: /***/ (
+    /***/ 2628: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/css",
         function () {
-          return __webpack_require__(4362);
+          return __webpack_require__(8707);
         },
       ]);
       if (false) {
@@ -18,14 +18,7 @@
       /***/
     },
 
-    /***/ 4350: /***/ (module) => {
-      // extracted by mini-css-extract-plugin
-      module.exports = { helloWorld: "css_helloWorld__aUdUq" };
-
-      /***/
-    },
-
-    /***/ 4362: /***/ (
+    /***/ 8707: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -39,7 +32,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__(9080);
       /* harmony import */ var _css_module_css__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           _css_module_css__WEBPACK_IMPORTED_MODULE_1__
@@ -58,13 +51,20 @@
 
       /***/
     },
+
+    /***/ 9080: /***/ (module) => {
+      // extracted by mini-css-extract-plugin
+      module.exports = { helloWorld: "css_helloWorld__aUdUq" };
+
+      /***/
+    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ 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,117 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [2291],
   {
-    /***/ 283: /***/ (
+    /***/ 2001: /***/ (
+      __unused_webpack_module,
+      __webpack_exports__,
+      __webpack_require__
+    ) => {
+      "use strict";
+      __webpack_require__.r(__webpack_exports__);
+      /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+        /* harmony export */ __N_SSP: () => /* binding */ __N_SSP,
+        /* harmony export */ default: () => __WEBPACK_DEFAULT_EXPORT__,
+        /* harmony export */
+      });
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
+        __webpack_require__(5640);
+      /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1__ =
+        __webpack_require__(9553);
+      /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1___default =
+        /*#__PURE__*/ __webpack_require__.n(
+          next_dynamic__WEBPACK_IMPORTED_MODULE_1__
+        );
+
+      const DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
+        () =>
+          __webpack_require__
+            .e(/* import() */ 8042)
+            .then(__webpack_require__.bind(__webpack_require__, 8042))
+            .then((mod) => mod.Hello),
+        {
+          loadableGenerated: {
+            webpack: () => [/*require.resolve*/ 8042],
+          },
+        }
+      );
+      const Page = () =>
+        /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(
+          react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,
+          {
+            children: [
+              /*#__PURE__*/ (0,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
+                children: "testing next/dynamic size",
+              }),
+              /*#__PURE__*/ (0,
+              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
+                DynamicHello,
+                {}
+              ),
+            ],
+          }
+        );
+      var __N_SSP = true;
+      /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = Page;
+
+      /***/
+    },
+
+    /***/ 2976: /***/ (
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/dynamic",
+        function () {
+          return __webpack_require__(2001);
+        },
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 7807: /***/ (
+      __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
+
+      /***/
+    },
+
+    /***/ 9553: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(6990);
+      module.exports = __webpack_require__(9986);
 
       /***/
     },
 
-    /***/ 505: /***/ (
+    /***/ 9829: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -53,7 +153,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__(7807);
       function resolve(obj) {
         return obj && obj.default ? obj.default : obj;
       }
@@ -288,90 +388,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
       /***/
     },
 
-    /***/ 5703: /***/ (
-      __unused_webpack_module,
-      __webpack_exports__,
-      __webpack_require__
-    ) => {
-      "use strict";
-      __webpack_require__.r(__webpack_exports__);
-      /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-        /* harmony export */ __N_SSP: () => /* binding */ __N_SSP,
-        /* harmony export */ default: () => __WEBPACK_DEFAULT_EXPORT__,
-        /* harmony export */
-      });
-      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(5640);
-      /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(283);
-      /* harmony import */ var next_dynamic__WEBPACK_IMPORTED_MODULE_1___default =
-        /*#__PURE__*/ __webpack_require__.n(
-          next_dynamic__WEBPACK_IMPORTED_MODULE_1__
-        );
-
-      const DynamicHello = next_dynamic__WEBPACK_IMPORTED_MODULE_1___default()(
-        () =>
-          __webpack_require__
-            .e(/* import() */ 2192)
-            .then(__webpack_require__.bind(__webpack_require__, 2192))
-            .then((mod) => mod.Hello),
-        {
-          loadableGenerated: {
-            webpack: () => [/*require.resolve*/ 2192],
-          },
-        }
-      );
-      const Page = () =>
-        /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(
-          react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,
-          {
-            children: [
-              /*#__PURE__*/ (0,
-              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", {
-                children: "testing next/dynamic size",
-              }),
-              /*#__PURE__*/ (0,
-              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
-                DynamicHello,
-                {}
-              ),
-            ],
-          }
-        );
-      var __N_SSP = true;
-      /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = Page;
-
-      /***/
-    },
-
-    /***/ 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__) => {
+    /***/ 9986: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -404,7 +421,7 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
         __webpack_require__(148)
       );
       const _loadablesharedruntime = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(505)
+        __webpack_require__(9829)
       );
       const isServerSide = "object" === "undefined";
       // Normalize loader to return the module as form { default: Component } for `React.lazy`.
@@ -504,30 +521,13 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE
 
       /***/
     },
-
-    /***/ 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 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: /***/ (
+    /***/ 4756: /***/ (
       __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__(4756);
+        },
+      ]);
+      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__(3594);
         },
       ]);
       if (false) {
@@ -18,7 +18,190 @@
       /***/
     },
 
-    /***/ 2514: /***/ (
+    /***/ 1206: /***/ (__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
+
+      /***/
+    },
+
+    /***/ 1765: /***/ (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
+
+      /***/
+    },
+
+    /***/ 3353: /***/ (
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      module.exports = __webpack_require__(5526);
+
+      /***/
+    },
+
+    /***/ 3594: /***/ (
+      __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;
+
+      /***/
+    },
+
+    /***/ 3854: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -34,9 +217,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(5127);
-      const _imageblursvg = __webpack_require__(4287);
-      const _imageconfig = __webpack_require__(2795);
+      const _warnonce = __webpack_require__(3603);
+      const _imageblursvg = __webpack_require__(7835);
+      const _imageconfig = __webpack_require__(6799);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -463,55 +646,69 @@
       /***/
     },
 
-    /***/ 3444: /***/ (
+    /***/ 5526: /***/ (
       __unused_webpack_module,
-      __webpack_exports__,
+      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,
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
       });
-
-      // 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",
-            }),
-          ],
+      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__(3854);
+      const _imagecomponent = __webpack_require__(8350);
+      const _imageloader = /*#__PURE__*/ _interop_require_default._(
+        __webpack_require__(1206)
+      );
+      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,
+        };
       }
-      var __N_SSP = true;
-      /* harmony default export */ const pages_image = ImagePage;
+      const _default = _imagecomponent.Image; //# sourceMappingURL=image-external.js.map
 
       /***/
     },
 
-    /***/ 4287: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7835: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -566,85 +763,7 @@
       /***/
     },
 
-    /***/ 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__) => {
+    /***/ 8350: /***/ (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__(8843)
       );
-      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__(3854);
+      const _imageconfig = __webpack_require__(6799);
+      const _imageconfigcontextsharedruntime = __webpack_require__(3905);
+      const _warnonce = __webpack_require__(3603);
+      const _routercontextsharedruntime = __webpack_require__(6712);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(5970)
+        __webpack_require__(1206)
       );
-      const _usemergedref = __webpack_require__(4985);
+      const _usemergedref = __webpack_require__(1765);
       // 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 index-HASH.js

@@ -1,7 +1,24 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [3332],
   {
-    /***/ 9418: /***/ (
+    /***/ 8230: /***/ (
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/",
+        function () {
+          return __webpack_require__(8696);
+        },
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 8696: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -19,30 +36,13 @@
 
       /***/
     },
-
-    /***/ 9532: /***/ (
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/",
-        function () {
-          return __webpack_require__(9418);
-        },
-      ]);
-      if (false) {
-      }
-
-      /***/
-    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(9532)
+      __webpack_exec__(8230)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for link-HASH.js

@@ -1,125 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [4672],
   {
-    /***/ 1854: /***/ (
-      __unused_webpack_module,
-      __webpack_exports__,
-      __webpack_require__
-    ) => {
-      "use strict";
-      __webpack_require__.r(__webpack_exports__);
-      /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-        /* harmony export */ __N_SSP: () => /* binding */ __N_SSP,
-        /* harmony export */ default: () => __WEBPACK_DEFAULT_EXPORT__,
-        /* harmony export */
-      });
-      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(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;
-
-      /***/
-    },
-
-    /***/ 3199: /***/ (__unused_webpack_module, exports) => {
-      "use strict";
-
-      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
-
-      /***/
-    },
-
-    /***/ 3568: /***/ (
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/link",
-        function () {
-          return __webpack_require__(1854);
-        },
-      ]);
-      if (false) {
-      }
-
-      /***/
-    },
-
-    /***/ 3857: /***/ (module, exports, __webpack_require__) => {
-      "use strict";
-
-      Object.defineProperty(exports, "__esModule", {
-        value: true,
-      });
-      Object.defineProperty(exports, "getDomainLocale", {
-        enumerable: true,
-        get: function () {
-          return getDomainLocale;
-        },
-      });
-      const _normalizetrailingslash = __webpack_require__(4869);
-      const basePath =
-        /* unused pure expression or super */ null && (false || "");
-      function getDomainLocale(path, locale, locales, domainLocales) {
-        if (false) {
-        } else {
-          return false;
-        }
-      }
-      if (
-        (typeof exports.default === "function" ||
-          (typeof exports.default === "object" && exports.default !== null)) &&
-        typeof exports.default.__esModule === "undefined"
-      ) {
-        Object.defineProperty(exports.default, "__esModule", {
-          value: true,
-        });
-        Object.assign(exports.default, exports);
-        module.exports = exports.default;
-      } //# sourceMappingURL=get-domain-locale.js.map
-
-      /***/
-    },
-
-    /***/ 3947: /***/ (module, exports, __webpack_require__) => {
+    /***/ 591: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -146,17 +28,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__(5837);
+      const _islocalurl = __webpack_require__(5953);
+      const _formaturl = __webpack_require__(6212);
+      const _utils = __webpack_require__(6950);
+      const _addlocale = __webpack_require__(6467);
+      const _routercontextsharedruntime = __webpack_require__(6712);
+      const _useintersection = __webpack_require__(9692);
+      const _getdomainlocale = __webpack_require__(6850);
+      const _addbasepath = __webpack_require__(4928);
+      const _usemergedref = __webpack_require__(1765);
+      const _erroronce = __webpack_require__(8659);
       const prefetched = new Set();
       function prefetch(router, href, as, options) {
         if (false) {
@@ -545,7 +427,17 @@
       /***/
     },
 
-    /***/ 4985: /***/ (module, exports, __webpack_require__) => {
+    /***/ 1148: /***/ (
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      module.exports = __webpack_require__(591);
+
+      /***/
+    },
+
+    /***/ 1765: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -623,7 +515,125 @@
       /***/
     },
 
-    /***/ 5624: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5436: /***/ (
+      __unused_webpack_module,
+      __webpack_exports__,
+      __webpack_require__
+    ) => {
+      "use strict";
+      __webpack_require__.r(__webpack_exports__);
+      /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+        /* harmony export */ __N_SSP: () => /* binding */ __N_SSP,
+        /* harmony export */ default: () => __WEBPACK_DEFAULT_EXPORT__,
+        /* harmony export */
+      });
+      /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
+        __webpack_require__(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__
+        );
+
+      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;
+
+      /***/
+    },
+
+    /***/ 6850: /***/ (module, exports, __webpack_require__) => {
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true,
+      });
+      Object.defineProperty(exports, "getDomainLocale", {
+        enumerable: true,
+        get: function () {
+          return getDomainLocale;
+        },
+      });
+      const _normalizetrailingslash = __webpack_require__(6457);
+      const basePath =
+        /* unused pure expression or super */ null && (false || "");
+      function getDomainLocale(path, locale, locales, domainLocales) {
+        if (false) {
+        } else {
+          return false;
+        }
+      }
+      if (
+        (typeof exports.default === "function" ||
+          (typeof exports.default === "object" && exports.default !== null)) &&
+        typeof exports.default.__esModule === "undefined"
+      ) {
+        Object.defineProperty(exports.default, "__esModule", {
+          value: true,
+        });
+        Object.assign(exports.default, exports);
+        module.exports = exports.default;
+      } //# sourceMappingURL=get-domain-locale.js.map
+
+      /***/
+    },
+
+    /***/ 8659: /***/ (__unused_webpack_module, exports) => {
+      "use strict";
+
+      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
+
+      /***/
+    },
+
+    /***/ 9666: /***/ (
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/link",
+        function () {
+          return __webpack_require__(5436);
+        },
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 9692: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -636,7 +646,7 @@
         },
       });
       const _react = __webpack_require__(148);
-      const _requestidlecallback = __webpack_require__(3543);
+      const _requestidlecallback = __webpack_require__(315);
       const hasIntersectionObserver =
         typeof IntersectionObserver === "function";
       const observers = new Map();
@@ -748,23 +758,13 @@
 
       /***/
     },
-
-    /***/ 8770: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(3947);
-
-      /***/
-    },
   },
   /******/ (__webpack_require__) => {
     // webpackRuntimeModules
     /******/ 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: /***/ (
+    /***/ 76: /***/ (
       __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__(76);
         },
       ]);
       if (false) {
@@ -62,13 +52,23 @@
 
       /***/
     },
+
+    /***/ 9413: /***/ (
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      module.exports = __webpack_require__(5282);
+
+      /***/
+    },
   },
   /******/ (__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,24 +1,17 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [1209],
   {
-    /***/ 1984: /***/ (
-      __unused_webpack_module,
+    /***/ 2227: /***/ (
+      module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/script",
-        function () {
-          return __webpack_require__(5769);
-        },
-      ]);
-      if (false) {
-      }
+      module.exports = __webpack_require__(5984);
 
       /***/
     },
 
-    /***/ 5769: /***/ (
+    /***/ 3043: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -33,7 +26,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__
@@ -66,12 +59,19 @@
       /***/
     },
 
-    /***/ 8293: /***/ (
-      module,
+    /***/ 3642: /***/ (
+      __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(900);
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/script",
+        function () {
+          return __webpack_require__(3043);
+        },
+      ]);
+      if (false) {
+      }
 
       /***/
     },
@@ -81,7 +81,7 @@
     /******/ 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,34 +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: /***/ (
-      __unused_webpack_module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      (window.__NEXT_P = window.__NEXT_P || []).push([
-        "/withRouter",
-        function () {
-          return __webpack_require__(9803);
-        },
-      ]);
-      if (false) {
-      }
-
-      /***/
-    },
-
-    /***/ 9803: /***/ (
+    /***/ 1089: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -43,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__
@@ -61,13 +34,40 @@
 
       /***/
     },
+
+    /***/ 3962: /***/ (
+      __unused_webpack_module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      (window.__NEXT_P = window.__NEXT_P || []).push([
+        "/withRouter",
+        function () {
+          return __webpack_require__(1089);
+        },
+      ]);
+      if (false) {
+      }
+
+      /***/
+    },
+
+    /***/ 9413: /***/ (
+      module,
+      __unused_webpack_exports,
+      __webpack_require__
+    ) => {
+      module.exports = __webpack_require__(5282);
+
+      /***/
+    },
   },
   /******/ (__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

Diff too large to display

Diff for 4719-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

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

failed to diff

Diff for app-page-exp..time.prod.js

Diff too large to display

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

failed to diff

Diff for app-page-tur..time.prod.js

Diff too large to display

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

failed to diff

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

failed to diff

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: 00f68ef

[controversial]

Why does this not cause a hydration error? To my knowledge, the page load still looks like:

1. Server sends pre-rendered “shell”
2. Server streams SSR-ed version of contents inside suspense boundary
3. Client performs hydration

Does the different value of Math.random() between SSR and the initial client render not still cause a hydration mismatch/error?

[gnoff]

Good catch. It does. I need to replace with a better example. This was adapted from the server component example and isn’t really a good example for the client component case. For simple stuff React has suppressHydrationWarning for simple mismatches which can allow SSRing a value like this and avoiding a hydration error in the browser but this example it wouldn’t be appropriate. Will update with a better one

[controversial]

Maybe useSyncExternalStore is a good hydration-safe way to use a random value in an isomorphic client component? I’m not sure whether that’s considered idiomatic React (though I don’t think useEffect is encouraged for such a case either).

function DynamicProductsView({ products }) {
  const randomSeed = useSyncExternalStore(
    () => () => {},
    () => Math.random(),
    () => Math.random(),
  );
  ...

---

For this example case—randomizing the order of products—it would be better I think to recommend that users provide a SSR-stable random value by lifting the Math.random() call from the client component to a server component, behind await connection(), and passing it as a prop to the client so it becomes a stable part of the RSC payload, so that the products don’t jump around to a different order after hydration.

Maybe that would be a reasonable approach to include in “Possible Ways to Fix It” when users are trying to include random values in client components under dynamicIO?

[gnoff]

The best thing is a simple but realistic use case. In the context of this doc you would get here because you had some Math.random in the client already. The random product example is interesting because the solution is to move it to the server and either cache it or guard it with await connection but that’s maybe not super common. But that’s solving a hydration issue which means this example is already not legit because you wouldn’t have been in this situation in the first place. So while it’s interesting I don’t think it’s the right example to use here. I haven’t seen a lot of Math.random during render. Probably because it is pretty incompatible with hydration already.

[gnoff]

The one I can recall off the top of my head was using it to force a useMemo to always produce a new value in certain circumstances which is unconventional. Doesn’t feel like an idiomatic example. Then again maybe there are no idiomatic ways to use random during render

[controversial]

agreed