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.
- Machine equipped to run Node.js 14.6.0
- Contentful account
- Blank Contentful space (without content or content models)
- API access to your Contentful space, including space ID, delivery and preview tokens, and a personal access token (sometimes called a management token)
Clone Example Project
create-stackbit-app to clone the example project and install dependencies.
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.
Set Environment Variables
.env and set the appropriate values.
CONTENTFUL_SPACE_ID="..." CONTENTFUL_PREVIEW_TOKEN="..." CONTENTFUL_DELIVERY_TOKEN="..." CONTENTFUL_MANAGEMENT_TOKEN="..."
setup script to fill the new space with content models and sample content.
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
npm run dev