The easiest way to start with Storyblok and Next.js
Learn how to develop your own Next.js applications that use Storyblok APIs to retrieve and manage content.
-
The Ultimate Tutorial
In this tutorial series, you will learn how to build a full-blown, multilingual website using Storyblok and Next.js Pages Router.
-
Next.js 13 in 5 minutes
Too busy to start from scratch, but excited to start learning how to use Next.js 13 with Storyblok?
Your learning journey with Storyblok starts here
Helpful resources
-
Storyblok React SDK on GitHub
The README contains useful information for integrating Storyblok with your Next.js app.
-
Add Storyblok to Next.js with App Router in 5 minutes
Learn how to add Storyblok to Next.js app router in this short tutorial.
-
Add Storyblok to Next.js with Pages Router in 5 minutes
Learn how to add Storyblok to Next.js with pages router in this short tutorial.
-
React Hub
Check out our React technology hub to find out how to integrate Storyblok with React applications.
-
Overview
Overview of the Storyblok Next.js Ultimate Tutorial
-
Part 1
Add a headless CMS to Next.js in 5 minutes
-
Part 2
Render Storyblok Stories Dynamically in Next.js
-
Part 3
Create Dynamic Menus in Storyblok and Next.js
-
Part 4
Create Custom Components in Storyblok and Next.js
-
Part 5
Create and Render Blog Articles in Storyblok and Next.js
-
Part 6
Manage Multilingual Content in Storyblok and Next.js
-
Part 7
Create a Preview Environment for Your Next.js Website
-
Crash Course to Jamstack with Next.js and Storyblok
In this quick course, we will put all these pieces together, and we will show you why Storyblok — in combination with Next.js — is the best combo for your next project.
-
Incremental Static Regeneration: Static sites on steroids
We will talk about Incremental Static Regeneration (ISR), a feature that Next.js framework offers us to generate static pages at runtime. With it, we get the benefit of static, but supporting dynamic data and page re-rendering on demand.
-
How Next.js Scales to Millions of Pages with ISR
We invited Education First to tell us how they solved this problem with the help of Next.js, Vercel and Storyblok, a headless CMS. In this talk, you’ll learn how to enable ISR in a headless project setup and see the difference in build times firsthand.
-
Getting Started with Next.js Commerce and Storyblok
Implement Storyblok into a Next.js commerce site. We will use BigCommerce as our eCommerce platform.
-
Personalizing a website with Storyblok and Next.js
In this guide, we will see how we can implement personalization strategies using Next.js and Storyblok.
-
Understand Next.js Incremental Static Regeneration
In this article, you'll be able to learn the difference between Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR).
-
Use Next.js Preview in iFrames
This FAQ shows a potential solution while integrating NextJs’ Preview Mode
-
Deploy a Next.js and Storyblok App to Vercel
Use Storyblok as a Headless CMS to power content for your Next.js app deployed with Vercel.
-
React SDK
The React plugin you need to interact with Storyblok API and enable the Real-time Visual Editing Experience.
-
Rich Text Renderer for React
Open-source component to render Storyblok rich text content to React elements.
-
CLI for the Management API
Use this CLI to access the Storyblok management API.
Basic topics
Perfect for anyone just getting started.
The Storyblok Next.js Ultimate Tutorial
In this tutorial series, you will learn how to build a full-blown, multilingual website using Storyblok and Next.js.
Videos
Watch our recordings and discover how your project could work and look like.
Advanced topics
This guide is for professionals who want to learn more about using Next.js and Storyblok together.
Tool & Plugins
From developers for developers, extend and add functionalities to your Storyblok project.
Made with Storyblok
and Next.js
With customers in nearly every industry and country, Storyblok helps thousands of people to manage their content.