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 (

ROOT PAGE

);
}

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.