Add storyblok to manage your landing page

storyblok is a content management system that allows you to create and manage your content in a simple and intuitive way. It also gives you the ability of a live preview of the content while editing it.

Setup storyblok

Before you get started you need to create an account for storyblok and create a new space.

For setting up the client in your project you will need an access token to your project. You can get this token by navigating to to Setting > Access Tokens in the storyblok admin panel. There you should find token with access level Preview.

Installing storyblok in the project

In your .env file add the copied access token to a new variable:

STORYBLOK_ACCESS_TOKEN=<access token>

Then install the storyblok client libary with the following command:

npm install @storyblok/react

Inititalize the storyblok client

In your index.ts file add the following code:

storyblokInit({
  accessToken: '',
  use: [apiPlugin],
  components: {
    page: Page,
    hero: Hero,
  },
});

Add files to /bloks folder

asdf;

asdf;

Render the storyblok components

Add storyblok url as valid url for next/image

Previewing your content

Get ssl certificate localhost to enable preview from local machine

https://www.storyblok.com/faq/setup-dev-server-https-proxy

Setting preview url in storyblok

Creating your content

Under entry configuration that the Real path for /home to /.