Next.js + Contentful Blog Starter

This is an example repository for you to use to create a new blog site using Next.js and Contentful, using Contentful's GraphQL API.

Read more about the GraphQL API.

View the demo site

Click here to explore the demo site that uses this repository as its source code.

Getting set up

Fork the repository to your GitHub account and clone it to your local machine.

#using git
git clone git@github.com:whitep4nth3r/nextjs-contentful-blog-starter.git

#using the GitHub CLI
gh repo clone whitep4nth3r/nextjs-contentful-blog-starter

Configuring your development environment

Install dependencies

In a terminal window, navigate to the project directory and install dependencies with npm.

cd nextjs-contentful-blog-starter
npm install

Set your environment variables

At the root of the project, create a new .env.local file. Add the following environment variable names to the file:

CONTENTFUL_SPACE_ID=
CONTENTFUL_ACCESS_TOKEN=

Using example content from Contentful

You can choose to use your own Contentful account, or connect to the example space that we've provided.

If you'd like to view some example content in your development environment to get a feel for how it works, you can use the provided credentials in env.local.example which will connect your code to the example space provided by Contentful.

Using your own Contentful account

To get started with your own Contentful space, sign up for free.

Create a new space inside your Contentful account. Go to Settings > General Settings, and make a note of your space ID.

Generate a Content Delivery API access token for your Contentful space.

Add your space ID and access token to your .env.local file.

Importing the starter content model and example content into your own Contentful space

To get started quickly on your own version of the application, you can use the Contentful CLI to import the content model and the example content from the starter into your own Contentful space — without touching the Contentful UI!

Install the Contentful CLI

#using homebrew
brew install contentful-cli

#using npm
npm install -g contentful-cli

#using yarn
yarn global add contentful-cli

Authenticate with the CLI

Open a terminal and run:

contentful login

A browser window will open. Follow the instructions to log in to Contentful via the CLI.

Import the content model and example content

The following command in your terminal, ensuring you switch out SPACE_ID for your new space ID.

cd nextjs-contentful-blog-starter/setup

contentful space import --space-id SPACE_ID --content-file content-export.json

You should see this output in the terminal. The import will take around 1 minute to complete.

Refresh Contentful in your browser, navigate to the content model tab, and you'll find the content types have been imported into your space. You'll find the example content by clicking on the content tab.

Running the application in development

Navigate to the project directory in a terminal window and run:

npm run dev

Deploy this site to Vercel

During the deploy process, add the following environment variables to Vercel. Use the same credentials as you set up in your local development environment.

CONTENTFUL_SPACE_ID
CONTENTFUL_ACCESS_TOKEN