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.

video thumbnail for the video with the id mou4ivn9tz

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.

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.

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.

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.

Set up your env variables

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

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.

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!