Next.js + Contentful Tutorial:

  1. Stackbit Setup for Next.js + Contentful
  2. Basic Page Editing with Contentful
  3. Inline Editing for API CMS
  4. Component Presets for Contentful

With your example project installed and running locally, let's begin the tutorial by installing Stackbit's local development environment.

This is a lesson within the Next.js + Contentful tutorial. Following it requires setting up the example project.

Configure Stackbit

Stackbit reads a stackbit.yaml configuration file from the root of your project directory. Add this file to your project with the minimal configuration for a Next.js + Contentful project:

# stackbit.yaml

stackbitVersion: ~0.5.0
ssgName: nextjs
nodeVersion: '16'
cmsName: contentful
modelsSource:
  type: contentful

Run Local Development

We'll come back to that configuration file as we explore the basics of Stackbit. But for now, we have enough to be able to run Stackbit locally.

Install Stackbit CLI

Install the CLI, which provides the stackbit command used to run the local development server:

npm install -g @stackbit/cli

Run Stackbit Dev

With your development server still running on port 3000, start the Stackbit dev server. For this to work properly, either set CONTENTFUL_SPACE_ID, CONTENTFUL_PREVIEW_TOKEN and CONTENTFUL_MANAGEMENT_TOKEN as environment variables, or replace the variables with the proper values in the command shown below.

stackbit dev -c contentful --contentful-space-id $CONTENTFUL_SPACE_ID --contentful-preview-token $CONTENTFUL_PREVIEW_TOKEN --contentful-management-token $CONTENTFUL_MANAGEMENT_TOKEN

Both servers (Next.js and Stackbit) should now be running on your machine.

Running dev servers in parallel

Open the Visual Editor App

stackbit dev outputs a URL unique to your user: app.stackbit.com/local/.... Open the full URL in your browser and register or sign in.

After signing in, you should see your example project within the preview section of Stackbit's visual editor. Learn more about Stackbit's visual editor.

Stackbit visual editor

Active Content Editor

The page editor will not be active at this point, but you should already see all your content models in the content panel and be able to make edits. This is one of the many benefits of using an API CMS with Stackbit.

Content tab with models

You're welcome to make edits now, but we'll get much more into content editing over the next two lessons.