Next.js app router (v15) and visual editor

[cmma0003]

Describe the issue you're facing

Hi,
I am working on a project using Next.js 15 (app router). I followed the steps described here and checked the code here too.
Visual editing works well for dev env, but doesn't fully work on live site (deployed to Vercel). I have created 2 endpoints to enable & disable draft mode, that can also add a header when requesting data from Storyblok:

  const sbParams: ISbStoriesParams = { version: isDraftMode ? 'draft' : 'published' };
  const storyData = await storyblokApi.get(`cdn/stories/${storyId}`, sbParams);

The issues I am facing are:

• Components are not highlighted when selecting them,
• To be able to see my changes during live editing, I need to click to Save and refresh the page, otherwise, I can't see them (so I cannot consider I am actually doing a live editing).
  What could be the reason? TIA.

Reproduction

Repository: https://github.com/cmma0003/storyblok
Deployed to Vercel here: https://storyblok-chi.vercel.app/

Steps to reproduce

1. Create the components in Storyblok: page & sampleComponent as per type that can be found in code.
2. Create a page called "home" with url "/".
3. Deploy to Vercel (if provided to me, I can add any preview token to it for simplicity)
4. Add the endpoints for visual editing in configuration, in my case: https://storyblok-chi.vercel.app/api/draft/ & https://storyblok-chi.vercel.app/api/disable-draft/
5. Select the draft mode to enable visual editing on "home" page: we are unable to see the element to edit highlighted, neither the changes while editing, unless clicking to Save button and refreshing page.

System Info

System:
    OS: macOS 15.2
    CPU: (8) arm64 Apple M3
    Memory: 567.33 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.10.0 - /opt/homebrew/opt/node@22/bin/node
    npm: 10.9.0 - /opt/homebrew/opt/node@22/bin/npm
    pnpm: 9.15.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 132.0.6834.160
    Safari: 18.2

Used Package Manager

npm

Error logs (Optional)

No response

Validations

• Follow our Code of Conduct

[alvarosabu]

Hi @cmma0003 I'm setting this ticket as needs-reproduction since the reproduction provided is not valid. Please provide a minimal reproduction so we can take a better look to your implementation. Thanks

[cmma0003]

Hi @alvarosabu , I have updated the request with some info for you to be able to reproduce the problem. TIA

[m-shum]

Having the exact same issue.
Auto-update doesn't work in the preview route when using draftMode as specified in the Next.js docs here: https://nextjs.org/docs/app/api-reference/functions/draft-mode

Repo here: https://github.com/m-shum/next-storyblok-starter

Things I've tried:

• removing middleware and letting the cookie persist (no diff)
• removing cookie (breaks because iframes)
• using just page.tsx at /app root

I did, however, notice a few things:

• Published stories autoupdate in the default localhost route (not the preview route)
• When they do, the terminal logs POST requests for every change triggered by (what I assume) is storyblok bridge
• In the preview route, those POST requests are never logged in the terminal. Not sure what this means since I'm pretty new to React and usually work in Vue

[cmma0003]

Hi @alvarosabu , any updates on this issue?

[alvarosabu]

Hi @cmma0003 is pending triage, from the team, as soon as we have an update we will update the labels