Stackbit Setup for Next.js + Contentful

Begin the tutorial by setting up the Next.js example project that uses Contentful as the content source.

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

Let's get Stackbit wired up to Contentful.

Install Dependencies

Using Contentful requires a single development dependency. (Stackbit does not require any dependencies in production.) Let's install it.

  • 1
npm install -D @stackbit/cms-contentful

Create Config File

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
import { ContentfulContentSource } from '@stackbit/cms-contentful'

export default {
  stackbitVersion: '~0.6.0',
  ssgName: 'nextjs',
  nodeVersion: '16',
  contentSources: [
    new ContentfulContentSource({
      spaceId: process.env.CONTENTFUL_SPACE_ID,
      environment: process.env.CONTENTFUL_ENVIRONMENT,
      previewToken: process.env.CONTENTFUL_PREVIEW_TOKEN,
      accessToken: process.env.CONTENTFUL_MANAGEMENT_TOKEN,
    }),
  ],
}

If you see an ESLint warning in your code editor for import/no-anonymous-default-export, you can ignore it in this file by adding /* eslint-disable import/no-anonymous-default-export */ to the top of the file.

Also note that the configuration file can also be stackbit.config.ts for projects using TypeScript.

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:

  • 1
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, you must set the four environment variables specified in stackbit.config.js:

  • CONTENTFUL_SPACE_ID
  • CONTENTFUL_ENVIRONMENT
  • CONTENTFUL_PREVIEW_TOKEN
  • CONTENTFUL_MANAGEMENT_TOKEN

You can use these variables inline with the command below or store them locally using your preferred method. Note that if your project contains a .env file, Stackbit does not automatically load it.

Once you've set the variables, you can start the Stackbit dev server.

  • 1
stackbit dev

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

Running Dev Servers in Parallel
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
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 Editing Panel
Content Editing Panel

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