Kickstart a new CMS project
with your favorite technology

Storyblok is a Headless CMS that works with all modern frameworks and platforms so you are completely free to choose the best option for your project. Get started in a matter of minutes!

  • Kickstart a new project

    Copy the command below by clicking on it and run it in your terminal. Choose Next.js 12 as your technology, follow the steps, and you're ready to go!

    • Integrate Storyblok in an existing Next.js 12 project

    • 1. Install the SDK

      In your terminal, run the following command:

    •         
            npm i @storyblok/react
          
    • 2. Configure the SDK

      In pages/_app.js, load the integration and provide the access token of your Storyblok space.

    • pages/_app.js
              
            import { storyblokInit, apiPlugin } from "@storyblok/react";
       
      storyblokInit({
        accessToken: "<your-access-token>",
        use: [apiPlugin]
      });
      
          
    • 3. Fetching a Story

      In pages/index.js, fetch the home story of your Storyblok space.

    • pages/index.js
              
            import Head from "next/head"
      import styles from "../styles/Home.module.css"
       
      import { getStoryblokApi } from "@storyblok/react"
       
      export default function Home(props) {
        return (
          <div className={styles.container}>
            <Head>
              <title>Create Next App</title>
              <link rel="icon" href="/favicon.ico" />
            </Head>
       
            <header>
              <h1>
                { props.story ? props.story.name : 'My Site' }
              </h1>
            </header>
       
            <main>
              
            </main>
          </div>
        )
      }
       
      export async function getStaticProps() {
        // home is the default slug for the homepage in Storyblok
        let slug = "home";
       
        // load the draft version
        let sbParams = {
          version: "draft", // or 'published'
        };
       
        const storyblokApi = getStoryblokApi();
        let { data } = await storyblokApi.get(`cdn/stories/${slug}`, sbParams);
       
        return {
          props: {
            story: data ? data.story : false,
            key: data ? data.story.id : false,
          },
          revalidate: 3600, // revalidate every hour
        };
      }
          
    • 4. Create Storyblok components

      Create the counterparts to the components defined in your Storyblok space. StoryblokComponent handles all of your nestable blocks automatically.

    • components/Page.js
              
            import { storyblokEditable, StoryblokComponent } from "@storyblok/react";
       
      const Page = ({ blok }) => (
        <main {...storyblokEditable(blok)}>
          {blok.body.map((nestedBlok) => (
            <StoryblokComponent blok={nestedBlok} key={nestedBlok._uid} />
          ))}
        </main>
      );
       
      export default Page;
          
    • Next Steps

      Follow our Ultimate Tutorial and learn how to build a complete website using Storyblok and Next.js. Alternatively, check out our other Next.js-related tutorials.


      Note: if you use Next.js 14+ with App Router, we released a new version of our React SDK fully supporting Server Components, with live editor enabled for developers. You can find a detailed guide in the README of our repo .

Useful Resources