Next.js + Contentful Tutorial

This tutorial gets you up and running with the basics of Netlify Create using a Next.js site, with Contentful as the content source.

Let's begin by getting the example project setup on your local machine.

Prerequisites#

• Machine equipped to run Node.js 14.6.0
• Contentful account
• Blank Contentful space (without content or content models)
• API access to your Contentful space, including space ID, delivery and preview tokens, and a personal access token (sometimes called a management token)

Clone Example Project#

Use create-stackbit-app to clone the example project and install dependencies.

npx create-stackbit-app@latest --example tutorial-nextjs-contentful

Change into the project directory when installation has completed. Unless otherwise noted, all commands will be run from the project root.

cd tutorial-nextjs-contentful

Set Environment Variables#

Copy .env.example to .env and set the appropriate values.

CONTENTFUL_SPACE_ID="..."
CONTENTFUL_PREVIEW_TOKEN="..."
CONTENTFUL_DELIVERY_TOKEN="..."
CONTENTFUL_MANAGEMENT_TOKEN="..."

Import Content#

Run the setup script to fill the new space with content models and sample content.

npx cross-env npm run setup

Run the Website#

You should now be able to run the Next.js development server and view the site at localhost:3000.

npm run dev