Netlify Create Configuration

Next.js + Contentful Tutorial: Part 2

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

Install CLI

Install the Stackbit CLI for Netlify Create, 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 Netlify Create 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 Netlify Create 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.

Netlify Create Visual Editor
Netlify Create Visual Editor

Configure Content Source

Next, we have to add our configuration file to tell Netlify Create how content is stored. First, install a couple development dependencies. (Netlify Create 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!,
Netlify Create 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 Netlify Create and it will be saved in Contentful. Or you can edit in Contentful, and the new values will be pulled into Netlify Create automatically.

Content Editing Panel
Content Editing Panel