Next.js Tutorial with Contentful

For your next project, use this Next.js tutorial with Contentful, a composable content platform that extends the capabilities of the headless CMS even further. The combination of Next.js with Contentful gives you the power to quickly build scalable dynamic static websites with improved search engine optimization (SEO) and enhanced performance.
Logo of Next.js framework
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.

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.

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):

5
Start the Next.js project

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

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 the project

Commit your changes and push your project to a repository on GitHub. You may now deploy the project using your preferred tool.

Deploy to Vercel: Import your repository into Vercel.

Deploy to Netlify: Import your repository into Netlify.

For any deployment tool, under environment variables, make sure to add in all of the variables from your .env.local file. And now your project is deployed!

Next.js CMS: Deliver content faster

Looking for a Next.js headless content management system solution? Deliver content faster with your favorite JavaScript framework paired with Contentful.

Building a website with Compose in Next.js

Logo of Next.js and logo of Contentful within curly brackets

How to add Algolia InstantSearch to your Next.js app

How to add Algolia Instant-Search to your Next.Js application

Next.js and Contentful video series

Illustration of the Next.js and Contentful intro and setup session

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

Illustration of several windows open, with the frontmost one having Next.js written in it

Choose your technology path with our language and framework agnostic CMS

Bundle of technologies that can be used with Contentful.
Partner with us
Contact us
Structured Content
add-circle arrow-right remove style-two-pin-marker subtract-circle remove