Deploy Next SPA with Storyblok to Layer0
Storyblok is the first headless CMS that works for developers & marketers alike.
This guide describes how to configure & deploy your single page application (SPA) built with Next and Storyblok to Layer0. You may check out the Add a headless CMS to Next.js in 5 minutes from Storyblok, which will be our starting point for this guide. Clone the repo next-storyblok-layer0-starter to get the entire setup.
Set up Storyblok space
Follow the steps in the Add a headless CMS to Next.js in 5 minutes from Storyblok to create a new space. Storyblok creates sample content for us so we don’t need to create any new stories. Fork the react-next-boilerplate repo. Open the folder in your IDE and install the dependencies of the project.
After these steps, you should be able to start the local environment using the following command.
Don’t forget to change the access token to one of your newly created Storyblok spaces, as described in Creating the Storyblok Client.
Set up Layer0
Layer0 is an All-in-one Jamstack platform to develop, deploy, preview, split test and monitor your frontend. Let’s get right onto the steps to deploy the react-next-boilerplate with Layer0.
Deploy from CLI
We are done with the deployment! You should see something like this in the console:
Go ahead and change content, publish it on Storyblok, and browse the ‘/home’ route of your website to look for changes (yes, Next.js Revalidation works just like that!)
CI/CD with GitHub Workflows to Layer0
Follow the same steps as mentioned in Deploy from CLI
Obtain the layer0_deploy_token by steps as in the screenshots below
3. Add STORYBLOK_API_TOKEN to Layer0 Developer Console by following the steps in the screenshots below. Why? Because for builds that happen with GitHub Workflows, Layer0 deploy command pulls down the environment variables from the Layer0 Developer Console and applies them to process.env so they can be accessed at build time. You need to set the environment variables only at Layer0 once and then you can configure CI/CD with any platform.
4. Add ‘layer0_deploy_token’ to GitHub Secrets-- see the screenshots below for the steps
5. Create a file layer0.yml in .github/workflows folder of the Next project and copy & paste the following configuration. The GitHub workflow assumes that you have two environments on Layer0: default (for changes to master branch) and staging (for other branches). Refer to Creating an Environment for creating the staging environment. Also, you should have created a deploy key for your site and added it as a secret in your repo called "layer0_deploy_token".
6. Commit & push your code to your repository and it’s all done!
In this tutorial, we learned how to integrate Storyblok CMS in a Next.js project and deploy it to Layer0. Add a headless CMS to Next.js in 5 minutes from Storyblok came in handy to set up the integration of StoryBlok with Next.js. We learned how to deploy the app with Layer0 CLI and set up the CI/CD Integration with GitHub Workflows.
|Github Example Repo||rishi-raj-jain/next-storyblok-layer0-starter|
|Next.js Documentation||Next.js Docs|
|Add a headless CMS to Next.js in 5 minutes||Add Headless CMS to Next.js|
|Layer0 Deploying Guide||Deploying Guide|