Easy Storyblok + Next.js Setup

2022-02-16

Laptop with code

The power of Headless CMS is highlighted several times in our articles. Today we will see how you can smoothly build your content using Storyblok and get your setup ready with Next.js.

Clearly, the very first step is to create your Storyblok account and add a new space to it.

Next.js setup

What is supposed to be in your presentation layer must be housed in Next.js. Thus, in order to make the process easier, all you need to start with is to clone the Next.js, Storyblok boilerplate GitHub repository

After that we will install all the dependencies using the following commands:

Take a look at the file placed in: lib/storyblok.js. You will notice a variable called 'accessToken'. Let's keep it in mind. We will need it soon!

Storyblok setup

Let's now move to the space you have created in Storyblok. Go to settings, copy your API key and paste it in the Next.js folder in front of the 'accessToken' variable. Now, our back-end content management system is correctly established and linked to our Next.js project.

Start your local server using one of the following commands.

Let's head back to the Storyblok dashboard in settings, click on the general tab and set the preview domain "Location (default environment)" to "http://localhost:3000/"

The navigation bar has a tab named 'Content', click on it and then click on a page. Just one more simple step and the magic will begin! At the top right corner click on the config tab to change the real path to the home directory ("/"). Refresh the page. Your visual editor has been launched.

You can preview your content and test its display in a flexible and meaningful way. Click on each component, and change your content without any developing skills or complicated procedures. Don't forget to save and refresh your local server to visualize the updated content.

We made this quick video demonstration for you.

Conclusion

Graphically managing your content is an awesome trendy way to enhance flexibility & scalability in your projects and to keep things under control! As a React.js developer at Will & Skill, we really appreciate performance and speed. So we definitely appreciate this combination of Next.js and Storyblok. Any questions or suggestions? Get in touch by email or Instagram DMs.

Enjoyed this article? Consider sharing it.