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!
Storyblok and Next.js
Helpful resources
-
Get started with Next.js 13
Read our latest in-depth tutorial to start using Storyblok with Next.js 13.
-
Next.js Technology Hub
Check out our technology hub to learn more about the combined power of Storyblok and Next.js.
-
Storyblok Discord
Join our supportive community of Storyblok and Next.js developers in the #next-hub channel of our Discord server.
-
Learning Hub
Comprehensive developer guides, API documentation, technology hubs and more.
-
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!
-
-
-
-
-
-
npm i @storyblok/react
-
- 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 .
-
-
Other Technologies
We are working hard to create comprehensive learning hubs for every popular technology. The following resources will help you kickstart your project and learn how Storyblok can be used with your technology of choice.
-
Choose your technology
-
JavaScript
Use the Universal JavaScript SDK to integrate with the Storyblok APIs in any JavaScript project.
-
TypeScript
Learn how to utilize the power of TypeScript in your Storyblok projects.
-
Angular
Learn how to use Storyblok with Angular.
-
Preact
Learn how to use Storyblok with Preact.
-
Laravel
Learn how to use Storyblok with Laravel.
-
Python
Use the official Python Client to integrate with the Storyblok APIs in any Python project.
-
Ruby
This article will show you how to use Storyblok in combination with Ruby on Rails.
-
Django
Learn how to combine Python, Django, and Jinja2 to render data from Storyblok.
-
ASP.NET
Learn how to integrate the Storyblok API with an ASP.NET application and enable a real-time content preview in the Visual Editor.
-