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

How to deploy your Next.js and ButterCMS 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 ButterCMS content management system, 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. ButterCMS is a drop-in headless CMS with zero headaches that allows you to never worry about hosting, upgrades, uptime, security or performance whilst storing all your content in one place.

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 + ButterCMS app in minutes.

Step 1: Create your ButterCMS Content

From your ButterCMS Collections dashboard, create a new Collection called Posts by clicking the + New Collection button.

Creating a Collection for your Next.js + ButterCMS project using the ButterCMS Collections dashboard.

Add the following fields to your Collection, all of type Short Text, by clicking the Add New Property button:

  • title
  • date
  • alt
  • image
  • url

Your Posts Collection should look like this:

An example Collection for your Next.js + ButterCMS project.

Next, click the + Add to Posts button to create a post, providing the relevant details.

That's it for creating content! You can edit both the Posts Collection and its content at any time, either by adding or removing Posts or changing the Collection Item Properties.

Next, select Settings from the account dropdown menu at the top left of the screen. Here you will find your Read API Token, make a note of this so you can use it later on in your app.

Step 2: Creating your Next.js Application

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

mkdir my-nextjs-buttercms-project && cd my-nextjs-buttercms-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(
      const { data } = await res.json()
      const allPosts = data.posts
  }, [])
  return (
        <title>Next.js + ButterCMS</title>
      {posts.length > 0
        ? => (
        : null}

export default HomePage

An example index.js page for your Next.js + ButterCMS 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} />
      <div className="text">
      <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;

export default Post

An example post.js component for your Next.js + ButterCMS 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 + ButterCMS project.

The above now.json file achieves three things:

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 + ButterCMS 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 key available to your application during local development by creating a file.

Create a file at the root of your project directory with the following code, adding your API key obtained in step 1 where instructed:


An example file for your Next.js + ButterCMS 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.

Step 4: Deploying the Application

With your application ready, it is time to deploy it using just a single command:


Using the now command to deploy your project to Now.

You will see a short build step in your terminal followed by the news that your project has been deployed, it should look similar to the example app.


For more information on working with ButterCMS and Next.js, please refer to their documentation.

To configure Now further, please see these additional topics and guides:

Written By
Written by msweeneydevmsweeneydev
on June 21st 2019