The Storyblok Next Ultimate Tutorial

In this tutorial series, you will learn how to build a headless website using Storyblok and Next.js. Starting with the fundamental integration of Storyblok in Next.js, more advanced functionalities are explained in bite-sized content pieces, such as dynamic page rendering, dynamic menus, custom components, multilingual content and more.

You can switch between the different branches of this repository; there is one branch for each tutorial part. Alternatively, you may want to check out the live demos on StackBlitz. You can even replicate the corresponding Storyblok space for each of the tutorial parts in order to explore its exact configuration.

Tutorial Parts

Part 1

• Tutorial: Add a headless CMS to Next.js 3 in 5 minutes
• Live demo: Open in StackBlitz
• Branch: part-1
• Storyblok space: Create your own copy

Part 2

• Tutorial: Render Storyblok Stories Dynamically in Next.js
• Live demo: Open in StackBlitz
• Branch: part-2
• Storyblok space: Create your own copy

Part 3

• Tutorial: Create Dynamic Menus in Storyblok and Next.js
• Live demo: Open in StackBlitz
• Branch: part-3
• Storyblok space: Create your own copy

Part 4

• Tutorial: Create Custom Components in Storyblok and Next.js
• Live demo: Open in StackBlitz
• Branch: part-4
• Storyblok space: Create your own copy

Part 5

• Tutorial: Create and Render Blog Articles in Storyblok and Next.js
• Live demo: Open in StackBlitz
• Branch: part-5
• Storyblok space: Create your own copy

Part 6

• Tutorial: Manage Multilingual Content in Storyblok and Next.js
• Live demo: Open in StackBlitz
• Branch: part-6
• Storyblok space: Create your own copy

Part 7

• Tutorial: Create a Preview Environment for Your Next.js Website
• Branch: part-7
• Storyblok space: Create your own copy

Requirements

To use this project you have to have a Storyblok account. If you don't have one yet you can register at Storyblok, it's free.

How to get started?

1. Clone the repo

  $ git clone https://github.com/storyblok/next.js-ultimate-tutorial.git

2. Install all dependecies

$  yarn # or npm install

3. Adding the Access token

Create a new empty Space and exchange the preview token with your own in pages/_app.js.

// in pages/_app.js
storyblokInit({
  accessToken: "your-preview-token",
  // for spaces located in the US:
  // apiOptions: {
  //   region: "us",
  // },
  use: [apiPlugin],
  components,
});

4. Run your project

Set the preview domain in Storyblok to http://localhost:3000/

# to run in developer mode
$ yarn dev # or npm run dev

# to build your project
$ yarn build # or npm run build

Resources

• Next.js docs
• Storyblok Next.js Ultimate Tutorial