Next.js 15 Visual Editor not working

[szabolcsveer]

Describe the issue you're facing

I am having an issue with the Visual Editor currently, trying to use the app router in Nextjs 15,
as far as I understood from your docs, there is no need for any special setup for the Visual Editor to make it work.

No matter what I do I get this screen

My current setup is also super simple:

storyblok.ts

import SimpleText from '@/components/SimpleText';
import TextSection from '@/components/TextSection';
import { apiPlugin, storyblokInit } from '@storyblok/react/rsc';
import Page from '../components/Page';

export const getStoryblokApi = storyblokInit({
  accessToken: process.env.STORYBLOK_ACCESS_TOKEN,
  use: [apiPlugin],
  apiOptions: {
    headers: 'Content-Security-Policy: frame-ancestors',
    cache: {
      clear: 'auto',
      type: 'memory',
    },
  },
  bridge: true,
  components: {
    page: Page,
    'text-section': TextSection,
    'simple-text': SimpleText,
  },
});

page.tsx --- in app root

import { getStoryblokApi } from '@/lib/storyblok';
import { ISbStoriesParams, StoryblokClient } from '@storyblok/react';
import { StoryblokStory } from '@storyblok/react/rsc';

export default async function Home() {
  const { data } = await fetchData();
  return (
    <div className="grid min-h-screen grid-rows-[20px_1fr_20px] items-center justify-items-center gap-16 p-8 pb-20 font-[family-name:var(--font-geist-sans)] sm:p-20">
      <h1>ROOT PAGE</h1>
      <StoryblokStory story={data.story} />
    </div>
  );
}

async function fetchData() {
  let sbParams: ISbStoriesParams = { version: 'draft' };

  const storyblokApi: StoryblokClient = getStoryblokApi();
  return storyblokApi?.get(`cdn/stories/nietzsche`, sbParams);
}

What am I doing wrong?
Your help would be appreciated.

Reproduction

no

Steps to reproduce

No response

System Info

"scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "format": "prettier --write ."
  },
  "dependencies": {
    "@storyblok/react": "^4.3.3",
    "next": "15.1.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@typescript-eslint/parser": "^8.19.1",
    "eslint": "^9",
    "eslint-config-next": "15.1.4",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-playwright": "^2.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.37.4",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-simple-import-sort": "^12.1.1",
    "eslint-plugin-unicorn": "^56.0.1",
    "postcss": "^8",
    "prettier": "^3.4.2",
    "prettier-plugin-tailwindcss": "^0.6.9",
    "sass": "^1.83.4",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }

Used Package Manager

yarn

Error logs (Optional)

No response

Validations

• Follow our Code of Conduct

[szabolcsveer]

@edodusi any thoughts pls? :)

[edodusi]

@szabolcsveer I suggest you to open these kind of questions on our Discord community https://discord.gg/jKrbAMz, as is seems more like a setup issue than an issue with this SDK.

Also be sure to read the Next.js Ultimate Tutorial https://www.storyblok.com/tp/nextjs-headless-cms-ultimate-tutorial and setup a local https server, otherwise it won't work from the Visual Editor.

[drazenbebic]

I feel like I have to weigh in on this.

@edodusi I understand that it is easier and perhaps even quicker to find answers to these kind of questions on Discord, that's why you'd want to motivate people to go there. I think that's great, but I would also post the answer here as well.

I've been struggling to updgrade my Next.js project to the v4 SDK for a while now. Finding resources online has been difficult, as it doesn't seem to be anything too obvious.

By posting the answer here you would help people like me!

@szabolcsveer So if you managed to solve this and and have an answer please post it 🙏

[edodusi]

Hi @drazenbebic, I understand your point. I didn't want to just redirect questions to Discord, but I think that it's more valuable for all the community to properly discuss these topics where discussions can be easily made and where Ambassadors and other users can jump in.

GitHub issues is the place where we want to investigate possible bugs or new feature for the SDK, meaning that an issue should ideally lead to a PR. When the problem described seem to be related to a specific user's configuration, and it requires some debug on that specific setup, this is when you should open a ticket on Storyblok's support: our engineers will try their best to assist you and solve the problem. Pairing the ticket with a discussion on Discord will help other users with the same issue.

To give you full transparency, we know that the documentation for v4 needs a proper rework. But we are in the process of moving all our docs to a new platform which is a WIP, and we have on the roadmap to include the Technology Guides, including Next.js, fully updated and covering all the things the users are reporting to use in these last few months.

So trust me, I understand your challenge, and I'm asking you some patience in this process, and to help us keeping the repository clean and efficient with issues that are related to improvements or fixes for the SDK.

I will keep this issue open for some time for users that want to express their thoughts, and I feel like I can give you all some advices when it comes to debugging this:

• start from the playgrounds that we have in this repo, use them as a reference and try to make them work and build on them
• always check your access token: for the live preview to work, it must be the preview token
• always check your http->https local proxy, the visual editor only works in https
• disable the JS Client cache, follow this FAQ
• if you think you did everything correct, try to setup a reproduction of your issue in a Stackblitz or similar, and open a ticket to our support system linking to the reproduction: that will help A LOT

Thank you all, I hope I didn't sound elusive, I really want you to be enthusiast for the work we put in our open source libraries and at the same time I would love to push for valuable discussions in our community.

[drazenbebic]

@edodusi Thank you for your fast and in-depth answer! First off, I want to let you know that I managed to make it work and have now finally updated the SDK in my Next.js application to v4.4!

The current pain point with the Documentation is that it's kind of all over the place. The Next.js Ultimate Tutorial is also pretty out of date (React 17 and SDK v2). It doesn't help how fast the underlying technologies are evolving, making documentation out of date rather fast. Having a single point-of-truth for the documentation would be fantastic! Really looking forward to that.

You mentioned that you have a lot of GitHub repositories as starters/references for successful integrations. Would be great to have a compiled list of those somewhere on this new platform so that it's easier to find. I tried browsing the GitHub Repository myself but only found out-of-date repositories.

PS: I would be happy to lend a hand and provide some feedback If you need some insights from my side as a senior dev. The application I upgraded uses React 19, Next.js 15, RSC, and utilizes next-intl for i18n.

[edodusi]

Thank you for your kindness @drazenbebic, I'm glad to hear that you managed to solve you issues! Since you are asking what you can do to help, participating on discussion on Discord is exactly the kind of help that we and the community appreciate! Also if you decide to write down your experience in a blog post, I'm sure our social team will be happy to share it via our social channels.

On the topic of documentation, I'm sure you will start seeing some really good progress soon, as you can imagine we have to deal with so many technologies and it's hard to provide a fixed roadmap, but we will share all the upgrades soon as we have them.

Regarding the starters: I was actually referring to the playgrounds on this very repository, you can find them on the playground folder, or follow this link.

There is a next15 project and we use it to test against every feature, and also to do automated tests, so we must be sure it's up-to-date and consistent: if something is not working on that playground, we have something to fix.

Hope this helps!