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
-
Basic topics
Perfect for anyone just getting started.
-
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.
-
-
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.
-
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
-
-
Videos
Watch our recordings and discover how your project could work and look like.
-
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.
-
-
Advanced topics
This guide is for professionals who want to learn more about using Next.js and Storyblok together.
-
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.
-
-
Tool & Plugins
From developers for developers, extend and add functionalities to your Storyblok project.
-
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.
-
Made with Storyblok
and Next.js
With customers in nearly every industry and country, Storyblok helps thousands of people to manage their content.