Next.js Storyblok Boilerplate with Typescript Support

This repository is a Next.js Storyblok starter template with Typescript. This is a fork of Storyblok's actual Next JS boilerplate which is without Typescript support.

Things included in this boilerplate

• Typescript support (@storyblok/react) doesn't officially support typescript yet, so we added some basic types
• Prettier
• ESLint
• Format code on Save
• SASS Modules
• A Storyblok Components Iterator to render array of Storyblok Bloks
  • (<StoryblokComponents bloks={} />)
• Component generator (yarn generate <ComponentName>)

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 tutorial about connecting Storyblok and Next.js

1. Clone the repo

$ git clone https://github.com/storyblok/react-next-boilerplate.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",

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 Tutorial

• Preview Mode