Next Story

How it works

From draft to live in four steps

What happens between an editor's change in Storyblok and the page you are reading.

Discover more

  1. 01 Edit
    Storyblok draft
  2. 02 Preview
    /api/preview draft
  3. 03 Publish
  4. 04 Render published
An edit becomes a preview, then a published page.

The publishing path

  1. Model

    Blocks are defined in one JSON file and pushed to the Storyblok space. TypeScript types are generated from the same file.

    storyblok/components.json

  2. Preview

    The Visual Editor opens the preview route, which checks the secret and the draft before it turns on Next.js draft mode.

    src/app/api/preview/route.ts

  3. Publish

    Storyblok calls the revalidate route with the story slug. The route validates the payload and expires that story's cache tag.

    src/app/api/revalidate/route.ts

  4. Serve

    The next request loads the published story from the Storyblok CDN and renders it as a React Server Component.

    src/lib/fetch-story.ts

Why the cache tags matter

Published stories are cached per story. A publish expires one story in every language, so the rest of the site stays cached. Drafts are never cached, so the editor always sees the latest change.

The full request path is in docs/architecture.md.

The schema names resolve to React components

The server registers the component map before rendering a story. Each block name in the CMS resolves to its implementation.

TypeScriptsrc/lib/storyblok.ts
export function registerStoryblokComponents(): void {
  setComponents(storyblokComponents);
}
The registration function used by the server renderer.

See what each block looks like

The block library renders every component once, labelled with its Storyblok name.

Open the block library

Learning notes