[Breaking] NextJs [14.2.3] Draft mode with static pages

[AnasArafeh]

Link to the code that reproduces this issue

https://github.com/AnasArafeh/NextJs-14.2.3-Draft-Mode-with-Static-pages

To Reproduce

1. install packages ( you will probably need -legacy-peer-deps ) probably related to the react version
2. you can use both next start or next dev
3. add either this URL api/draft-mode?slug=home or api/draft-mode?slug=home/isr to the example : http://localhost:3000/api/draft-mode?slug=home
4. check the console.log in the terminal you will see that no search parameters being sent.

Current vs. Expected behavior

Previously, when we are using draft mode all static games switch to be dynamic pages so we are able to use search parameters.

However, once we have upgraded to 14.2.3 and later, and issue happened where search parameters are being empty all the time using the exact same code.

Important update also if you remove the request.nextUrl.search from the redirect then the Static pages will not switch into Dynamic**

Static page transform into Dynamic without having access to search parameters during Draft mode

Static page stays as Static during Draft mode. (Also isEnabled from Draft Mode will also show as false even though it was enabled)

One more thing which is unrelated to this bug, I found another bug related to draft mode most likely, where you access draft mode given the steps above, when you try to kill the terminal using Ctrl + C, you get the following memory leak error:

• you can enter the http://localhost:3000/api/draft-mode?slug=home in the browser or multiple times then try to close the terminal and you will have the error above. This is also starting happening after upgrading to the latest version

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Enterprise
  Available memory (MB): 20323
  Available CPU cores: 8
Binaries:
  Node: 18.18.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.3.0-canary.85 // Latest available version is detected (14.3.0-canary.85).
  eslint-config-next: N/A
  react: 19.0.0-rc-f994737d14-20240522
  react-dom: 19.0.0-rc-f994737d14-20240522
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

Not sure, Navigation, Runtime

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

next dev (local), next start (local)

Additional context

I had NextJs version 14.0.3 while everything was working fine but when I upgraded to 14.2.3 I noticed this issue.

[AnasArafeh]

I have created another issue https://github.com/vercel/next.js/issues/66282 for the MaxListenersExceededWarning.

[jizhi0v0]

Add "use client" at the top of /home/page.tsx.

[AnasArafeh]

@jizhi0v0 adding "use client" makes the page client side. The Idea here is to use static page, so it should stay server side.

There is a huge change of behavior between versions which is not announced in the blogs. Which means it is unexpected behavior ( a bug ) that occurred.

[jizhi0v0]

@jizhi0v0 adding "use client" makes the page client side. The Idea here is to use static page, so it should stay server side.

There is a huge change of behavior between versions which is not announced in the blogs. Which means it is unexpected behavior ( a bug ) that occurred.

Add "use client" or switch to 'force-dynamic'.I don't know if what I said is correct, I hope it can help you

https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config

'force-dynamic': Force dynamic rendering, which will result in routes being rendered for each user at request time. This option is equivalent to getServerSideProps() in the pages directory.

[AnasArafeh]

@jizhi0v0 I understand what you are trying to say. However, I need the page to be static not dynamic.

However, the default behavior for Static pages during Draft mode is Dynamic https://nextjs.org/docs/app/building-your-application/configuring/draft-mode

Draft mode is usually used when you work with CMS so the admin will have the ability to change static pages and view the changes in real time instead of requiring rebuilds or invalidate the cache on change. ( so the page will be dynamic during that time only)

[chrisrhymes]

I am experiencing a similar issue after upgrading Next.js from 14.0 to 14.2.3, with the difference that we are not using draft mode, but we are using server side generated pages fetching content from a CMS using Apollo client. The server will not stop when I use ctrl + c and the memory limit warning is displayed. This is when using next build then next start. The issue does not occur when running next dev.