Contentful and Next.js Tutorial

Build your first Next.js starter with Contentful. The combination of Next.js with a headless CMS like Contentful gives you the power to quickly build scalable dynamic static websites with improved search engine optimization (SEO) and enhanced performance.

What is Next.js
Next.js is a JavaScript React framework that can be used to build pre-rendered React applications. Along with a stellar developer experience, this framework offers developers both server-side rendering (SSR) and static-site generation.
1
Create a new Next.js project

Create a new Next project on your local machine using our Next.js Contentful starter template. Our template is a blog that includes a pre-built content model JSON file, a homepage and individual blog pages, and uses Tailwind CSS for styling.

Copy
npx create-next-app --example cms-contentful cms-contentful-app
cd cms-contentful-app

2
Create Contentful account

Create a Contentful account with an empty space.

Import a sample content model into your space.

You will need your Space ID and you will need to create a Content Management Token. You can find your Space ID in the Contentful app in Settings under API Keys. Click on Add API key. 

You will also need to create a Content Management API token. Avoid sharing this token because it allows both read and write access to your Contentful space. Once the token is generated copy the key and save remotely as it will not be accessible later on. If lost, a new one must be created.

Use your Space ID and Content Management Token in the command below to import the pre-made content model into your space.

Copy
npx cross-env CONTENTFUL_SPACE_ID=YOUR_SPACE_ID CONTENTFUL_MANAGEMENT_TOKEN=XXX npm run setup

This imports a template content model so you can skip manual config.

3
Create content

Add at least 1 author entry and 2 post entries into your space. Click on Content in the top navigation bar to do so. Make sure you publish each entry.

4
Set up your env variables

Create a .env.local file and include the following values (which can be found under API keys in settings):

Copy
CONTENTFUL_SPACE_ID=your Space ID
CONTENTFUL_ACCESS_TOKEN=Content Delivery API token
CONTENTFUL_PREVIEW_ACCESS_TOKEN=Content Preview API token 

Copy
CONTENTFUL_PREVIEW_SECRET=any URL friendly value of your choice

5
Navigate into the Next.js

Start the developer server in the Next.js Contentful project.

Copy
npm install

Copy
npm run dev

Your project should now be running on http://localhost:3000.

Note: If you are unable to see content populating in your local blog, you may be hitting GraphQL query limits. Add a limit to the postCollection queries in lib/api.js.  Check out our GraphQL docs for more information.

At this point, you can now modify your Next.js application by updating the CSS, changing the content model, or even modifying the blog homepage. You can update the homepage in the index.js file and if you change your Contentful content model, make sure to update the GraphQL query in the api.js file.

Create a repository on GitHub (or other website of your choosing). Commit your changes to your local project and push your project to your repository on GitHub.

6
Deploy to Vercel

Commit your changes and push your project to a repository on GitHub. Import your repository into Vercel. Under environment variables, add in all of the variables from your .env.local file. And now your project is deployed!

Building a website with Compose in Next.js

How to add Algolia InstantSearch to your Next.js app

Next.js and Contentful video series

Paginating your Contentful blog posts in Next.js with the GraphQL API

Integrate Next.js and Contentful

Choose your technology path with our language and framework agnostic CMS

More than a CMS: The API-first content platform for your tech stack
Build for free
Curious guy
add-circle arrow-right remove style-two-pin-marker subtract-circle