Deploy Next SSG with Storyblok to Cloudflare Pages

In this tutorial, we will explore how to deploy applications built with Storyblok on Cloudflare pages. We'll deploy a blog application built with Next.js and Storyblok on Cloudflare pages and configure a deploy hook to publish changes we make on our application automatically.

This tutorial benefits readers interested in Storyblok, Next.js, and who plan on deploying their applications built with Storyblok to Cloudflare.

Requirements

The following are required for this tutorial:

• Basic knowledge of Next.js and React
• Node, yarn (or npm), and npx installed
• An account on Storyblok to manage content

If you're new to Storyblok, We highly recommend our tutorial Add a headless CMS to Next.js in 5 minutes.

Setup Next project

For this article, I prepared a blog application written with Next.js. Clone the project repository here to your local computer using the command below:

Run either of the commands below in the project’s root folder to install dependencies:

Configure Storyblok space

Next, set up a Storyblok space for the blog following this guide. After setting up the space, the content should look like this:

Create your preview token

Navigate to your settings tab {1} in your space, in the new page click on API-keys tab {2} and toggle to get your space preview token {3}

Adding environment variables to Next SSG

In the root folder of your Next.js application, create an env.local file, inside it, add your environment variables which include your Storyblok API keys, your space preview token and a Fallback=true.We will need this to prevent Next.js fallback error during deployment.

Your .env.local file should look like this:

Deploying to Cloudflare Pages

We are going to deploy our project as an SSG. Read more about NEXT static site generation (SSG) here. To deploy your application, create a GitHub repository for the application and push it to that repository. We need to do this because we can only deploy to Cloudflare pages from Github or Gitlab.

After this, create a Cloudflare account from here. After creating an account and signing in, navigate to Home {1}, and click on pages {2}:

Click on the Create a project {1} button:

Choose the Git repository you hosted your project on by connecting GitHub {1} or GitLab {2}, and grant Cloudflare access. Select the project and begin setup:

On the setup page, under Build settings {1} > Framework Preset {2}, choose the Next.js preset {3}. It will add a deployment command and specify the folder to deploy after the build. We also need to add environment variables:

Make sure you add all the variables in the .env.local file of the project except FALLBACK. We don’t want a fallback in our getStaticPaths function in production as this could cause a fallback: true export error.

A fallback:trueexport error occurs when fallback is added to getStaticPropswhich renders the build invalid. Click on Save and Deploy.

Set up webhooks

To set up deploy hooks on Cloudflare pages. Go to Settings {1} on Cloudflare pages, under builds and deployment {2} look for the create deploy hooks section {3}. Create a new hook and set the branch you want to deploy.

Copy the generated hook, then Go to Settings of your Storyblok space and under that General tab, you will find the Webhooks section {1}. Paste your recently copied webhook into the Story published & unpublished field {2}. Finally, add the deploy hook to the input for webhook then save it:

Now, every time you publish or unpublish your content in the space, Storyblok will trigger the webhook and Cloudflare will automatically start the deployment of your page. You can see a live version of the application here.

Conclusion

In this article, we learned how to deploy applications built with Next and Storyblok to Cloudflare pages and set up a deploy hook for redeployment when any change is unpublished in our Storyblok space. We also looked at static site generation (SSG).

Nextjs and Cloudflare pages sources