Next.js Storyblok Boilerplate

This repository is a Next.js Storyblok starter template.

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?

Read the Next.js 13 tutorial about connecting Storyblok and Next.js

1. Use this template

Create a new repository from this template by clicking the Use this template button.

2. Install all dependencies

yarn # or npm install

3. Adding the Access token

Create a new empty space and copy the Preview Token. Create your .env.local from .env.example:

mv .env.example .env.local

Add the token from Storyblok and a password/any string for the preview-mode (and the webhook):

STORYBLOK_TOKEN=<your-new-token>
SECRET=<your-token-or-password>

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

5. Generate boilerplate components and TypeScript types

First, make sure you have the Storyblok CLI installed and set up with your account. Next, replace SPACE_ID in package.json with your space ID e.g. 123456.

# get current component definition
yarn pull-components

# generate boilerplate components
yarn generate-components

Whenever your component definitions have changes, you can update your types:

# generate types from component definition
yarn generate-sb-types

6. Setup preview mode

To enable preview mode you have to add two preview URLs in Storyblok:

Preview https://<my-url>/api/draft?secret=<your-preview-password-or-token>&slug=

Exit Preview https://<my-url>/api/exit-draft?slug=

Don't forget to add the secret as env-variable. It might be helpful for the end user to set the preview URL as default.

7. Webhook for revalidation

To revalidate pages after publishing in Storyblok, you have to set up the following Webhook URL: https://<my-url>/api/story-published?secret=<your-preview-password-or-token>

Don't forger to add the secret token as env-variable.

Resources

• Next.js docs
• Storyblok Tutorial
• Preview Mode