vercel / vercel/next.js

draftMode not accurate in middleware with nodejs runtime

Open
#82,344 3 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Draft Mode
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/erzr/nextjs-middleware-draft-mode

To Reproduce
  • Check out linked repro
  • Visit /api/preview which enables draft mode
  • Observe that redirect happens but response headers contain x-draft-mode = disabled
  • Visit /?draft=true which triggers middleware to set draft mode to true
  • Observe the error Invariant: previewProps missing previewModeId this should never happen
  • Comment out runtime from middleware
  • Observe this functionality works as expected
Current vs. Expected behavior

When following steps, I expect (await draftMode()).isEnabled to be accurate and to be able to enable draft mode from middleware without error.

Provide environment information
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:54:49 PDT 2025; root:xnu-11417.121.6~2/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.17.0
  npm: 10.9.2
  Yarn: 4.9.1
  pnpm: 10.14.0
Relevant Packages:
  next: 15.4.2-canary.29 // Latest available version is detected (15.4.2-canary.29).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.9.2
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

Draft Mode

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

next dev (local), Vercel (Deployed)

Additional context

Seems like some environment variables might be missing? When I print out process.env I see some _NEXT prefixed variables not present in nodejs runtime but present in edge runtime.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Run the linked reproduction and compare the /api/preview and /?draft=true flows with the middleware using the Node.js runtime versus the Edge runtime. Trace how draft mode state and environment variables reach middleware, then verify that draftMode().isEnabled is accurate and the previewProps missing previewModeId error no longer occurs.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, nodejs
Domain
api, backend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.