Parsing searchParams through URLSearchParams results in a static built page (app dir)

[sean-nicholas]

Link to the code that reproduces this issue

https://github.com/sean-nicholas/next-url-search-params-bug

To Reproduce

1. Create a new page
2. Get searchParams from the page props
3. Wrap them in const params = new URLSearchParams(searchParams)
4. Access a property via const name = params.get('name')
5. Return this variable in jsx return <div>{ name }</div>

Example Code:

// file: src/app/not-working/page.tsx

export default function NotWorking({
  searchParams,
}: {
  searchParams: Record<string, string>
}) {
  const params = new URLSearchParams(searchParams)
  const name = params.get('name')

  return <div>Hello {name}</div>
}

Current vs. Expected behavior

Currently the site is statically built, but it should be built dynamically. Here is the build output:

Route (app)                              Size     First Load JS
┌ ○ /                                    144 B          87.5 kB
├ ○ /_not-found                          882 B          88.3 kB
└ ○ /not-working                         145 B          87.5 kB
+ First Load JS shared by all            87.4 kB
  ├ chunks/472-b52a6e43ae18aa6e.js       32.3 kB
  ├ chunks/fd9d1056-7bc4f66d3604ee23.js  53.2 kB
  ├ chunks/main-app-217286bdf4350867.js  232 B
  └ chunks/webpack-bf1a64d1eafd2816.js   1.66 kB


○  (Static)  automatically rendered as static HTML (uses no initial props)

If you access name directly the page would be built dynamic.

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:34 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T8103
Binaries:
  Node: 18.16.1
  npm: 9.5.1
  Yarn: 1.22.19
  pnpm: 8.9.2
Relevant Packages:
  next: 13.5.7-canary.25
  eslint-config-next: 13.5.6
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

I would love to fix the issue myself. I found createSearchParamsBailoutProxy. URLSearchParams does not call get() but ownKeys(). So I would add this to the proxy and call staticGenerationBailout().

The only question I have is: What's the purpose of the if and do I need to reflect that in ownKeys()?

https://github.com/vercel/next.js/blob/305bb015060e82be3e6ae59a3d063c11a3e207f9/packages/next/src/client/components/searchparams-bailout-proxy.ts#L8-L9