Next.js + Contentful Tutorial

Follow a hands-on tutorial to learn the basics of Stackbit with a Next.js project using Contentful as the content source.

This tutorial takes a hands-on approach to learning Stackbit's core concepts using Next.js as the site framework and Contentful as the content source.

Before we move onto individual lessons, let's make sure that you can run the example project locally on your machine.

See the getting started intro for more information on the format and goals of this tutorial.

System Requirements

We suggest you also have the following to optimize your experience:

  • Browser: Google Chrome
  • Node: v14 or later

Setup Next.js Example Project

Let's begin by installing the example project, which is a Next.js + Contentful site:

  • 1
  • 2
npx create-stackbit-app@latest --example tutorial-nextjs-contentful
cd tutorial-nextjs-contentful

This creates a new repo in a tutorial-nextjs-contentful directory on your machine and installs the dependencies.

Setup and Connect Contentful

Next, we'll set up and connect Contentful to be sure the project can run properly before setting up Stackbit.

Create Contentful Space

After signing into or registering with Contentful, create a new community (free) space. Note that if you already have an active Contentful account, you may want to create an organization to place your new space. Choose the Web app only package.

New Contentful Community Space - Web App Only
New Contentful Community Space - Web App Only

Generate Management Token

If you don't already have a management token (also called a personal access token), you can generate one. Follow these steps from within the new empty space:

  1. Click Settings
  2. Choose API Keys
  3. Select the Content management tokens tab
  4. Click the button to generate a new token
Generate API Management Token
Generate API Management Token

Take care to store this token as necessary. You will not be able to view it again within Contentful.

Import Content

Your new project already contains the content for the tutorial. You can import this into Contentful by running the setup command from within the new project directory.

  • 1
npx cross-env CONTENTFUL_SPACE_ID=... CONTENTFUL_MANAGEMENT_TOKEN=... npm run setup

Replace the ... with the appropriate values:

  • Space ID can be found in the URL when inside a space.
  • Management token is the token you just created (or referenced).

After this step, you should see content models and entries in Contentful.

Entries Imported to Contentful
Entries Imported to Contentful

Generate API Keys

From the same place you generated the management token, you can now generate API access keys.

  1. Select the content delivery / preview tokens
  2. Choose Add API key
Add API Keys for Space
Add API Keys for Space

Set Environment Variables

On your machine, duplicate .env.example to .env. Fill in the values:

  • 1
  • 2
  • 3
CONTENTFUL_SPACE_ID="..."
CONTENTFUL_DELIVERY_TOKEN="..."
CONTENTFUL_PREVIEW_TOKEN="..."

The preview API key can be copied from the API screen you see after creating a new key.

Copy API keys
Copy API keys

Run the Project

Now you should be able to run the Next.js development server and see your content.

  • 1
npm run dev

Visit localhost:3000 and you should see the example content you imported into your new Contentful space.

Next.js Development Site
Next.js Development Site