Stackbit Configuration

Next.js + Contentful Tutorial: Part 2

Adding Stackbit's local visual editor application to an existing site takes just a few quick steps.

Install CLI

Install the Stackbit CLI, which we'll use to launch the local visual editor application.

  • 1
npm install -g @stackbit/cli@latest

Run Visual Editor

With the Next.js development server still running, open a new terminal session to run the visual editor using the CLI's dev command.

  • 1
stackbit dev

Now, if you visit localhost:8090, you'll see the Next.js site that is also running on port 3000. The application running on port 8090 is a local Stackbit application that proxies to the development server, and also contains a few assets and routes to facilitate visual editing.

Register Your Project

One such route is /_stackbit. This will redirect to the authentication process that makes it possible to work with Stackbit locally.

Open localhost:8090/_stackbit in your browser and create an account. You'll be redirected to a new URL that is unique to your local editing environment. The preview here is the application running on localhost:8090.

Stackbit Visual Editor
Stackbit Visual Editor

Configure Content Source

Next, we have to add our configuration file to tell Stackbit how content is stored. First, install a couple development dependencies. (Stackbit does not require any production dependencies.)

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

Then, add a stackbit.config.ts configuration file that specifies the source of content as Contentful. This is the minimum configuration needed to work with this project locally.

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

export default defineStackbitConfig({
  stackbitVersion: '~0.6.0',
  contentSources: [
    new ContentfulContentSource({
      spaceId: process.env.CONTENTFUL_SPACE_ID!,
      environment: process.env.CONTENTFUL_ENVIRONMENT || 'master',
      previewToken: process.env.CONTENTFUL_PREVIEW_TOKEN!,
      accessToken: process.env.CONTENTFUL_MANAGEMENT_TOKEN!,
    }),
  ],
})
Stackbit automatically loads the content from .env into process.env.

Basic Content Editing

Notice that the content tab is populated with the content in your Contentful space. This is editable via a two-way content sync.

You can edit in Stackbit and it will be saved in Contentful. Or you can edit in Contentful, and the new values will be pulled into Stackbit automatically.

Content Editing Panel
Content Editing Panel