Deploy Next SSG with Storyblok to Cloudflare Pages

Contents
    Try Storyblok

    Storyblok is the first headless CMS that works for developers & marketers alike.

    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.

    IMPORTANT:

    The project in this article was developed using the following versions of these technologies:

    The GitHub repository with all the code samples is available here

    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:

    git clone https://github.com/storyblok/cloudflare-next-example.git

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

    npm install

    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:

    Set up your Storyblok space

    Set up your Storyblok space

    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}

    create your preview token
    1
    2
    3

    create your Storyblok preview token

    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:

    STORYBLOK_API_KEY={YOUR STORYBLOK SPACE PREVIEW TOKEN}
    STORYBLOK_PREVIEW_SECRET={YOUR RANDOMLY CREATED SECRET FOR PREVIEW}
    FALLBACK=true

    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}:

    deploy to cloudflare pages
    1
    2

    deploy to cloudflare pages

    Click on the Create a project {1} button:

    Create a pages project
    1

    Create a pages project

    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:

    connect GitHub or GitLab
    1
    2

    connect GitHub or GitLab

    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 pages
    1
    2
    3

    set up pages

    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.

    INFO:

    With the deploy hook, whenever we add or edit any content in our Blog Storyblok space and publish it, Cloudflare will automatically redeploy our app.

    Cloudflare deploy hook
    1
    2
    3

    Cloudflare deploy hook

    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:

    Adding web hooks to storyblok
    1
    2

    Adding hooks to storyblok

    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