Next.js Storyblok Edgio Boilerplate

This repository is a Next.js Storyblok Edgio starter template used in following guide.

Requirements

To use this project you have to have a Storyblok and Edgio account. If you don't have one yet you can register at Storyblok and Edgio, both are free!

How to get started?

Read the Next.js tutorial about connecting Storyblok and Next.js

1. Clone the repo

git clone https://github.com/rishi-raj-jain/next-storyblok-edgio-starter.git

2. Install Dependencies

npm install

3. Adding the Access token

Create a new empty Space and exchange the preview token with your own in lib/storyblok.js.

// in lib/storyblok.js
const Storyblok = new StoryblokClient({
  accessToken: "your-preview-token", // process.env.STORYBLOK_API_TOKEN (refer to .env.example)
  cache: {
    clear: "auto",
    type: "memory",
  },
});

4. Run your project

Set the preview domain in Storyblok to http://localhost:3000/

npm run dev

5. Install Edgio CLI

npm i -g @edgio/cli
edgio init

5. Run a production build of your app and test it locally

edgio build && edgio run --production

6. Deploy to Edgio

edgio deploy

7. (Optional) Add Environment Variables on Edgio Console

Follow this section of guide to add STORYBLOK_API_TOKEN and EDGIO_DEPLOY_TOKEN for integrating it with GitHub Workflows.

Resources

• Next.js docs
• Storyblok Tutorial
• Preview Mode
• Edgio Deploy Guide