Next.js + Contentful Tutorial

Learn the basics of Netlify Create with Next.js as the site framework and Contentful as the content source.

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.


Clone Example Project

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

  • 1
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.

  • 1
cd tutorial-nextjs-contentful

Set Environment Variables

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

  • 1
  • 2
  • 3
  • 4

Import Content

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

  • 1
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.

  • 1
npm run dev
Next.js Development Site
Next.js Development Site