Visual Preview in Next.js

Enhance your editorial and development experience by connecting your local project with Storyblok’s visual editor.

Set the default environment

Go to Settings > Visual Editor and set the default environment to the URL of the local dev server. The Next.js default is https://localhost:3000/.

Run the server with the --experimental-https flag enabled:

npx next dev --experimental-https

To render the home story correctly in the Visual Editor, go to the Config section and write / into the Real path field.

You may have to open the URL in a separate browser tab and accept the certificate first.

Bridge with the Visual Editor

Connect Next.js components with their Storyblok counterparts by using the storyblokEditable function:

This function adds HTML attributes to the components and allows the Storyblok Bridge to connect them with the Visual Editor.

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

const Feature = ({ blok }) => {
  return (
    <div className="feature">
    <div className="feature" {...storyblokEditable(blok)}>
      <span>{blok.name}</span>
    </div>
  );
};

export default Feature;

Now, click on a component and see its corresponding block open up in the editor, or change a field value and see it rendered in real-time.

Deploy the preview environment

Make sure to fetch the draft version of the content and use a preview access token. Deploy in client-side or server-side rendering mode to reflect content updates dynamically upon saving content.

For the production environment, fetch the published version of the content and use a public access token.

@storyblok/react Package Reference

Concept: Visual Editor

Get in touch with the Storyblok community