Search params are undefined when draft mode is enabled

[MangoMarcus]

Link to the code that reproduces this issue

https://github.com/MangoMarcus/nextjs-draft-mode-empty-search-params

To Reproduce

1. Clone the repository and spin up locally with npm i and npm run dev
2. Use the two buttons at the top to toggle draft mode on and off
3. The 'token' parameter shows 'undefined' when draft mode is off, and 'foo' when it's on
4. Deploy to Vercel, or use mine: https://nextjs-draft-mode-empty-search-params.vercel.app/?token=foo
5. Use the buttons again - the 'token' parameter shows 'undefined' when draft mode is off, but also 'undefined' when it's on

Current vs. Expected behavior

Locally the token correctly displays as 'foo' with draft mode enabled, but on Vercel it's 'undefined'. Vercel should also show 'foo'.

Interestingly there's also a discrepancy between urlPathname and isRevalidate between local and vercel shown in the screenshots below

Local - dev mode (npm run dev)

Draft mode disabled

Draft mode enabled

Local - production build (npm run build && npm start)

Draft mode disabled

Draft mode enabled

Vercel

Draft mode disabled

Draft mode enabled

Provide environment information

Operating System:
  Platform: macOS
  Chip: Apple M1 Pro
  Version: macOS 14.4
Binaries:
  Node: 20.2.0
  npm: 9.6.6
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.4
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.3
Next.js Config:
  output: N/A

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

Output (export/standalone), Runtime

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

Vercel (Deployed)

Additional context

The problem might stem from the search parameter being accessed dynamically, depending on if draft mode is enabled.

If draft mode is enabled then the page is rendered dynamically and dynamic features like search parameters and cookies should be available. If it's disabled, then it's rendered statically and all search parameters should returned undefined.

My example shows that draft mode is correctly enabled - and therefore the page is being rendered dynamically at request time - but the dynamic features are not available.

Edit: Added local production build examples

[MangoMarcus]

As an aside, how actively are these issues monitored? I've submitted 2 bugs months ago which have yet to be acknowledged by a maintainer

[MangoMarcus]

Edited to add an example of a production build run locally which also works as expected, which confirms a discrepancy between a production app built and run locally vs on Vercel

[samcx]

As an aside, how actively are these issues monitored? I've submitted 2 bugs months ago which have yet to be acknowledged by a maintainer

@MangoMarcus Actively as possible! We are currently taking a look at this.

[MangoMarcus]

As an aside, how actively are these issues monitored? I've submitted 2 bugs months ago which have yet to be acknowledged by a maintainer

@MangoMarcus Actively as possible! We are currently taking a look at this.

Thanks @samcx 🙏

[samcx]

@MangoMarcus It turns out your page was not bailing out of ISR (static) because searchParams was accessed conditionally (searchParams.token). This is because we don't know if searchParams is going to be accessed until runtime.

I tried just adding:

<pre>{JSON.stringify(searchParams)}</pre>

Afterwards, token is no longer undefined.

• https://github.com/MangoMarcus/nextjs-draft-mode-empty-search-params/blob/4e07c5d9a2b885e48b2f1260a4062dff074244f4/src/app/page.tsx#L18

I am curious though as to why you want to access your searchParams and make your page dynamic? I believe this defeats the purpose of Draft Mode, which is a way to preview your static page dynamically.

[MangoMarcus]

Thanks @samcx , sorry for the delayed response.

---

I am curious though as to why you want to access your searchParams and make your page dynamic? I believe this defeats the purpose of Draft Mode, which is a way to preview your static page dynamically.

I don't, I only want the search params in draft mode

When draft mode is disabled, I want to render the page statically using data fetched from my headless CMS, which is identified using the current URL path

When draft mode is enabled, I want to render the page dynamically using data fetched from my headless CMS, which is identified using the current URL path AND a token from the search params (which matches a draft version of the page in my CMS)

---

It turns out your page was not bailing out of ISR (static) because searchParams was accessed conditionally (searchParams.token).

That's correct, the search params are conditionally accessed only if draft mode is enabled (which obviously bypasses static rendering with a cookie).

This behaviour is supported by nextjs, but not when hosted on Vercel. This is confirmed by running the app locally with npm run build and npm run start, or when running it on another platform such as Netflify: https://soft-gumdrop-5ab214.netlify.app/?token=foo

Surely this qualifies as a bug? You'd at least expect the behaviour to be the same. I've confirmed that it's the same in the latest Next v15

✅ localhost: http://localhost:3000/?token=foo

✅ Netflify: https://soft-gumdrop-5ab214.netlify.app/?token=foo

❌ Vercel: https://nextjs-draft-mode-empty-search-params.vercel.app/?token=foo

[MangoMarcus]

Just to clarify

I tried just adding:

{JSON.stringify(searchParams)}

Afterwards, token is no longer undefined.

This would opt the page in to always be dynamically rendered, correct? I still want it to render statically, unless draft mode is enabled