Next.js Contentful Integration

This article walks through setting up the Contentful Content Delivery API integration with your Next.js app. We have already created many content models that we are using on our pages. If you have not done so, you will need to create a content model and content in Contentful.

In order to use Contentful’s API we first need to grab our tokens. In the Contentful platform, go to Settings > API keys and there you’ll be able to copy the Space ID and Content Delivery API — access token.

Contentful Navigation

Contentful API Keys

Then go to your Next.js app and install Contentful.

yarn add contentful

Create a .env.local file where you will set your tokens. I created variables that clearly identify that the tokens are for Contentful and named them CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN). This file will be ignored from Git as long as it’s included in your .gitignore file, so your variables are kept secret.

(*Side note — any time you update an env file you’ll want to restart your server to be able to access those variables you just created.)

Next update the next.config.js file in order to use your env variables.