Create a Next.js and Storyblok Application That Builds and Deploys with Now

How to deploy your Next.js and Storyblok application with Now in a serverless environment

In this guide, you will discover how to create a Next.js app that displays links to posts from the ZEIT blog by utilizing the Storyblok headless CMS, before deploying with just a single command to ZEIT Now.

Next.js from ZEIT is a production-ready framework that helps you create fast React applications. Storyblok is a headless CMS with a visual editor, block system, custom field types and localization built in.

By following this guide, you will create a clone of the example app, a starting point to get you up and running with your own Next.js + Storyblok app in minutes.

Step 1: Create your Storyblok Content

From your Content Dashboard, create a new Entry with a Content type of Post by clicking the + Entry button.

Creating an Entry for your Next.js + Storyblok project using the Storyblok Content Dashboard.

Note: When you type in the Content type field, you will be given the option to Create new "post", you should select this option.

After completing the details in the modal, click Create, this will take you to a new view. Now, click the Define schema button, you should see the following in the sidebar:

Defining a Post Schema for your Next.js + Storyblok project.

Add the following fields to your Post Schema, by typing in the input and clicking the + Add button:

title
date
alt
image
url

Your Post Schema should look like this:

An example Post Schema for your Next.js + Storyblok project.

Next, click the arrow back at the top left of the page to return to the Content dashboard. Then, click + Entry once more, this time choosing your Post Schema as the Content Type.

All that's required is to add the content where requested, then click Save at the top right of the screen followed by Publish for each post you wish to add.

That's it for creating content! You can edit both the Post and Post Schema at any time, giving you complete flexibility over your content.

At this point, return back to your Content Dashboard and click Settings from the sidebar on the left. Select the API-Keys tab and create a new Public key, you should make a note of this so it can be used later.

Step 2: Creating your Next.js Application

Firstly, create a project directory and cd into it like so:

mkdir my-nextjs-storyblok-project && cd my-nextjs-storyblok-project

Creating and entering into the project directory.

Next, initialize your project, creating a package.json file in the process:

yarn init -y

Initializing your project with a package.json file.

Note: Using the -y flag will initialize the created package.json file with these default settings.

Next, add the project dependencies:

yarn add next react react-dom

Adding next, react and react-dom as dependencies to your project.

With the project initialized, create a /pages directory with a index.js file inside that uses the following code:

import { useEffect, useState } from 'react'
import Head from 'next/head'
import Post from '../components/post'

function HomePage() {
  const [posts, setPosts] = useState([])
  useEffect(() => {
    async function getPosts() {
      const res = await fetch(
        `https://api.storyblok.com/v1/cdn/stories?token=${
          process.env.API_TOKEN
        }`
      )
      const { stories } = await res.json()
      setPosts([...stories])
    }
    getPosts()
  }, [])
  return (
    <>
      <Head>
        <title>Next.js + Storyblok</title>
        <link
          rel="stylesheet"
          href="https://css.zeit.sh/v1.css"
          type="text/css"
        />
      </Head>
      {posts.length > 0
        ? posts.map(p => (
            <Post
              alt={p.content.alt}
              date={p.content.date}
              key={p.content.title}
              image={p.content.image}
              title={p.content.title}
              url={p.content.url}
            />
          ))
        : null}
    </>
  )
}

export default HomePage

An example index.js page for your Next.js + Storyblok project.

Let's take look at what this file achieves.

Inside the useEffect hook, an asynchronous function, getPosts, is defined, this is then called in the useEffect hook to retrieve the posts on initial load.

With the posts retrieved, they are then mapped over to be displayed with a <Post> component that you will create next.

Create a /components directory that contains a post.js file with the following content:

function Post({ alt, date, image, title, url }) {
  return (
    <div className="container">
      <a href={url}>
        <img alt={alt} src={image} />
      </a>
      <div className="text">
        <h2>{title}</h2>
        <h4>{date}</h4>
      </div>
      <style jsx>{`
        .container {
          cursor: pointer;
          height: 453px;
          margin-bottom: 48px;
        }
        a {
          border-bottom: none;
        }
        a:hover {
          border-bottom: none;
        }
        .text {
          margin-top: -160px;
          padding: 24px;
          position: absolute;
        }
        h2 {
          color: white;
          font-size: 24px;
          margin-bottom: 0;
        }
        h4 {
          color: rgba(255, 255, 255, 0.8);
          font-size: 16px;
          font-weight: 500;
          margin-top: 8px;
        }
      `}</style>
    </div>
  )
}

export default Post

An example post.js component for your Next.js + Storyblok project.

Now that your page and component files have been created, the next step will show you how to use the now.json file to allow for both local development and cloud deployment.

Step 3: Adding a `now.json` File

With your project ready, the now.json file provides an opportunity to instruct Now on how to build and deploy your project. Add a now.json file at the root of your project directory with the following code:

{
  "version": 2,
  "builds": [{ "src": "package.json", "use": "@now/next" }],
  "build": {
    "env": {
      "API_TOKEN": "@api_token"
    }
  }
}

An example now.json file for your Next.js + Storyblok project.

The above now.json file achieves three things:

version ensures you are using the latest Now 2.0 platform version
builds instructs Now to use the @now/next Builder to build your project
build passes environment variables to the Build process for use inside your app

With your now.json file created, you should add a next.config.js file at the root of your project directory with the code below:

module.exports = {
  target: 'serverless',
  env: {
    API_TOKEN: process.env.API_TOKEN
  }
}

An example next.config.js file for your Next.js + Storyblok project.

The next.config.js file achieves two things:

Instructs Next.js to build for a serverless environment
Provides access to environment variables inside your Next.js app

Next, you will make your API keys available to your application during local development by creating a .env.build file.

Create a .env.build file at the root of your project directory with the following code, adding your API keys where instructed:

API_TOKEN=your-api-token

An example .env.build file for your Next.js + Storyblok project.

Lastly, to make your API key available for cloud deployment, create a Now Secret with the command below:

now secrets add API_TOKEN your-space-id

Adding the API_TOKEN secret to your project using Now Secrets.

With those steps out the way you are now able to run your application. You can develop your application locally using the following command:

now dev

Using the now dev command to simulate the Now deployment environment locally.

By using now dev, you are able to run your application locally, in a reproduction of the Now deployment environment. This ensures there are no surprises when you deploy your app.