How to init Storyblok CMS to work with "NextJS 13 - Story Blok Starter"

Arthur LIEGE |
0 step |
16 minutes

1 of 14

Create a Workspace Get basic information like API key Check available blocks inside "Block Library"Add Preview URL Change the Default preview URL Create the folder structure Create the Homepage Create your Header Create your Footer Create your 500 Error page Create your 404 Error page Add 3 testimonials Complete your Homepage Add SEO to homepage (title and meta description)

This is a Step by Step guide to setup correctly everything you need for this repository: [https://next-js-13-storyblok-starter.vercel.app/](https://next-js-13-storyblok-starter.vercel.app/)

This Storyblok workspace used as a demo has already been deleted!

Create a Workspace

Navigate to [https://app.storyblok.com/#/me/spaces/new](https://app.storyblok.com/#/me/spaces/new).

Click the "Name your new space *" field and add a name.

Zoom Saved

Click "Create space".

Zoom Saved

Get basic information like API key

Click "Settings".

Zoom Saved

Copy your "Space ID and fill" all the "XXXXXX" inside your project / code.

Zoom Saved

Run the command : yarn storyblok-push-components

Only once you have replaced all the "XXXXXX" as asked in the Readme "Getting Started", you can run the command: yarn storyblok-push-components

Click "Access Tokens".

Zoom Saved

Copy your "Access Token".

Zoom Saved

Add this "Access Token" inside your .env.local "REACT_STORYBLOK_ACCESS_TOKEN"

Run the command : yarn dev

It's normal to have errors on start: we don't have any data inside our StoryBlok CMS

Check available blocks inside "Block Library"

Click and go to "Block Library".

Zoom Saved

Delete default block Library : "feature" + "grid" + "teaser".

Click "page".

Zoom Saved

Want to make guides like this in seconds? Yes, it's really that fast.

Have something to say?Create an account to leave messages for the author to see!

This Scribe is in tip-top shape!Leave feedback if there are any issues with this Scribe