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.
Samuel Snopko and his talk on how to use Storyblok with Next.js
-
![The Ultimate Tutorial]()
The Ultimate Tutorial
In this tutorial series, you will learn how to build a full-blown, multilingual website using Storyblok and Next.js.
-
![Next.js in 5 minutes]()
Next.js in 5 minutes
Too busy to start from scratch, but excited to start learning how to use Next.js with Storyblok?
Your learning journey with Storyblok starts here
Need Help?
-
Basic topics
Perfect for anyone just getting started.
-
How to start with Next.js
If you’re new to Next.js we recommend that you start here.
-
Add Storyblok to Next.js in 5 minutes
Learn how to add Storyblok to Next.js in this short tutorial
-
Your first Next.js and Storyblok project
This demo is built using Next.js: Configure the Storyblok bridge between your Storyblok space and the project.
-
Routing in Next.js
Next.js has a file-system based router built on the concept of pages.
-
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
-
-
Videos
Watch our recordings and discover how your project could work and look like.
-
Going Headless with Next.js and Storyblok
Watch this 30 minutes long video to get an overview how your project with Next.js will look like.
-
Headless eCommerce with Next.js
Let Lisi explain to you how you can build your headless eCommerce with Next.js Commerce, Storyblok and BigCommerce.
-
Learn with Jason - Storyblok
Learn with Jason Lengstorf what are the true powers of Storyblok as he tries it for the first time ever.
-
-
Advanced topics
This guide is for professionals who want to learn more about using Next.js and Storyblok together.
-
Build a Multilanguage Website with Next.js
This guide is for the beginners and the professionals who want to build a full-blown multilanguage website using Next.js and Storyblok.
-
Getting Started with Next.js Commerce and Storyblok
Implement Storyblok into a Next.js commerce site. We will use BigCommerce as our eCommerce platform.
-
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.
-
Personalize your projects using Next.js and Storyblok
In this guide, we will see how we can implement personalization strategies using Next.js and Storyblok.
-
Use Next.js Preview in iFrames
This FAQ shows a potential solution while integrating NextJs’ Preview Mode
-
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).
-
Image Service on Private assets with Next.js
In this tutorial, we will learn how to use Storyblok image service on private assets
-
-
Tool & Plugins
From developers for developers, extend and add functionalities to your Storyblok project.
-
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.
-
Next.js Example Blog
A blog boilerplate by Vercel
-
Official React SDK
The React plugin you need to interact with Storyblok API and enable the Real-time Visual Editing Experience.
-
Made with Storyblok
and Next.js
With customers in nearly every industry and country, Storyblok helps thousands of people to manage their content.
Case Studies
Next.js Demo Project
Too busy to start from scratch, but excited to start learning how to use Next.js and Storyblok? Get a website or blog up and running in minutes. Modify and adapt it to your liking, it’s all yours!
Next.js Cheatsheet
We’ve included the shortcuts for the most commonly used aspects of Storyblok with Next.js. Our cheat sheet is available in pdf A4 format.
Build a Storefront
with Next.js and BigCommerce
Learn in detailed step by step guide how to create your own storefront with Next.js & BigCommerce.