Page Editing

Next.js + Contentful Tutorial: Part 3

Pages are a type of model that represent a single URL path in your site.

When the proper configuration, Stackbit can build a complete sitemap and show the proper content fields as editors navigate between pages in the application. This requires specifying which models represent pages and how each page maps to a URL path in the site.

Specifying Page Models

Open the stackbit.config.ts file and add a modelExtensions property to declare the page model as a page model.

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

export default defineStackbitConfig({
  stackbitVersion: '~0.6.0',
  contentSources: [
    new ContentfulContentSource({
      // ...
    }),
  ],
  modelExtensions: [{ name: 'page', type: 'page', urlPath: '/{slug}' }],
})

This tells Stackbit to extend its knowledge about the Contentful model with an ID of page — to declare it with a page type, and to map its URLs paths using the slug field within the page model.

Sitemap Navigator

Going back to the Stackbit editor, you should now see the sitemap populated with the home page entry, which was added to the CMS when importing content.

Sitemap Navigator with Home Page
Sitemap Navigator with Home Page

Contextual Page Editor

This change also enabled the contextual page editor (pencil icon in left sidebar). Notice that you can open this panel and see the fields and values for this page.

Update Hero Heading
Update Hero Heading

As with basic content editing, making changes here will update content in Contentful in an changed (unpublished) state.

Updated Content in Contentful
Updated Content in Contentful