Visual Editing with Next.js App routing

[negprof]

Hello,

I'm encountering issues with the visual editing feature. Despite following the tutorial closely, I'm unable to pinpoint any errors in my approach.

I've attached my code for review. Is there something I might have overlooked? Any assistance would be greatly appreciated, as we are eager to integrate Storyblok into our business operations.

When changing for example the Hero Blok, it´s not getting refreshed inside the live editing.

Thank you.

app/industires/[slug]/page.js

import {
    getStoryblokApi,
} from "@storyblok/react/rsc";
import StoryblokStory from "@storyblok/react/story";
import MainTemplate from "@/app/templates/MainTemplate";

export default async function IndustryPage({params}) {

    // Define the slug for your desired story
    const slug = params.slug;
    const { data } = await fetchData(slug);
    return (
        <MainTemplate>
            <div>
                <StoryblokStory story={data.story} />
            </div>
        </MainTemplate>
    );
}

// Modify fetchData to accept a slug parameter
export async function fetchData(slug) {
    let sbParams = { version: "draft" };
    const storyblokApi = getStoryblokApi();
    return storyblokApi.get(`cdn/stories/industries/${slug}`, sbParams);
}

components/storyblok/StoryblokProvider

"use client";
import { storyblokInit, apiPlugin } from "@storyblok/react/rsc";

import Industry from "./Industry";
import Teaser from "./Teaser";
import Feature from "./Feature";
import Grid from "./Grid";
import Hero from "./Hero";

/** 2. Initialize it as usual */
storyblokInit({
    accessToken: `6vfq**************`,
    use: [apiPlugin],
    components: {
        feature: Feature,
        grid: Grid,
        teaser: Teaser,
        industry: Industry,
        hero: Hero,
    },
});

export default function StoryblokProvider({ children }) {
    return children;
}

components/storyblok/Hero

import { storyblokEditable } from "@storyblok/react/rsc";

const Hero = ({ blok }) => {
    return <h1 {...storyblokEditable(blok)}>{blok.Title}</h1>;
};

export default Hero;

Reproduction

/

Steps to reproduce

No response

System Info

System:
    OS: macOS 14.0
    CPU: (12) arm64 Apple M2 Max
    Memory: 1.29 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
    pnpm: 8.6.10 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 117.0.5938.149
    Safari: 17.0

Used Package Manager

npm

Error logs (Optional)

No response

Validations

• [X] Follow our Code of Conduct

[negprof]

Update: I found out, that only hard reloading the next.js site makes the updatet storyblok content appear. I think there is somewhere a caching bug on the next.js side.

[gandalf92]

@negprof

At the moment our temporary fix would be to set cach invalidation to the cirrent Timestamp inside ´storyblokApo.get('cdn/stories/home', {version: 'draft', cv: Date.now()})`.

[negprof]

@gandalf92 hey thanks. This works partially. What I done is that I deleted my space and restartet from scratch. I think it was a bug inside storybloks side. Thanks all!

[negprof]

Hello,

the issue came back on a diffrent fresh space. The iFrame inside the visual editor blinks shortly with the changed content, and than it shows the old content. only hitting the save button makes the new content appear again.

Probaly this issue: https://github.com/storyblok/storyblok-react/pull/883

[arorachakit]

Hey @negprof ! Thanks for reporting, I've just merged the PR you mentioned. You should be able to use the SDK properly now.

Regarding the cache issue (it is a different one), we are working on a fix for that as well. It is being worked directly inside the js-client : https://github.com/storyblok/storyblok-js-client/pull/727

Feel free to open this issue or create a new one if you face any issues.

[valebearzotti]

Hi there! You're missing the { cache: "no-store" } param when using full RSC.

Change your call to: storyblokApi.get(cdn/stories/industries/${slug}, sbParams, { cache: "no-store" });

This is missing in the README steps, will PR to add it.