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

[bogimobi]

We also are reproducing the issue on Next 15, we are not able to select ( highlight ) components through SB on click

[yuli-mobi]

I can confirm our team also has this issue after upgrading to Next 15, we cannot use the functionality to select a component inside the the SB visual editor.

[Benzou65]

Same here after updating to Next 15.

[Ziothh]

This might have something to do with how next internally mounts the components.

When I init the storyblok api inside a useEffect() it also doesn't work.
Which is probably why we're forced to mount the StoryblokProvider at the highest point of our app so that I doesn't rerender ever, which might not be desirable if you want to have non-storyblok pages aswel.

[avdb]

Same issue here, live preview with visual editor is not working with Next 15