Usage

Alokai integration for Storyblok ships with a framework-agnostic Typescript SDK. You can use it to:

fetch your content from the Storyblok Content Delivery API,
initialize the Storyblok Bridge feature.

Before you read

Visit Alokai SDK documentation to learn how to access sdk in both Next and Nuxt.

Fetching a Story

Your primary method for fetching content items should be getPage(). It allows you to fetch a collection of items and build sophisticated search queries (e.g. specifying the desired locale to resolve the content in).

const content = await sdk.storyblok.getStory('home', {
    language: 'en',
  version: 'draft' // is set to draft if _storyblok query is in url
});

Fetching multiple stories

To fetch a single item by ID, you can use the getStories() method.

const item = await sdk.storyblok.getStories({
    language: 'en',
});

Enabling live editing

To enable visualizations for individual components or whole pages, use the initLivePreview() utility method. As well as setting the 'version' to draft.

version is set to draft when the query string _storyblok is found in url.

https://<STORYBLOK_REGION>.storyblok.com/v2/cdn/stories/home?language=en&version=draft&token=<API_KEY>&cv=1234

The response in the draft response provides a key of _editable which is used for live-preview

page.tsx

import type { SearchParams } from 'nuqs/parsers';
import { getSdk } from '@/sdk/sdk.server';
import LivePreview from './live-preview';

type PageProps = {
  content: any,
  params: {
    slug?: string[];
  };
  searchParams: SearchParams;
};

export default async function StoryblokPage(props: PageProps) {
  const sdk = getSdk();

  const content = props.content ?? await getContent();

  async function rerender(content: any) {
    "use server"
    return <StoryblokPage {...props} content={content} />
  }

  async function getContent() {
    const content = await sdk.storyblok.getStory('home', {
        language: 'en',
        version: 'draft' // is set to draft if _storyblok query is in url
    });

    return content.story.content 
  }

  return (
    <>
      <div id="ssr-content">
        {/* your content goes here */}
      </div>
      <LivePreview rerender={rerender} />
    </>
  );
}

live-preview.tsx

'use client';
import { ReactNode } from 'react';
import { useEffect, useState } from 'react';

import { useSdk } from '@/sdk/alokai-context';

export interface LivePreviewProps {
  /**
   * The server callback function to be called when the content is updated
   */
  rerender: (content: any) => Promise<ReactNode>;
}

export default function LivePreview({ rerender }: LivePreviewProps) {
  const sdk = useSdk();
  const [previewContent, setPreviewContent] = useState<ReactNode>(null);

  useEffect(() => {
    sdk.storyblok.utils.initLivePreview({
      callback: async (updatedContent) => {
        setPreviewContent(await rerender(updatedContent));
      }
    });
  }, []);

  useEffect(() => {
    const ssrContent = document.getElementById('ssr-content');
    if (previewContent && ssrContent) {
      /**
       * Hide the old SSR content when the preview is ready
       */
      ssrContent.style.display = 'none';
    }
  }, [previewContent]);

  return previewContent;
}