This repository is a Next.js Storyblok starter template.

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.

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

  $ git clone https://github.com/sahli-interactive/next-storyblok.git

$  yarn # or npm install

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>

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

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

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

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.

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-paswsword-or-token>

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

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

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

# get current component definition
$ yarn pull-components
# generate types from component definition
$ yarn generate-sb-types

• Next.js docs
• Storyblok Tutorial
• Preview Mode