Finding the page to edit on Contentful can be cumbersome, so I created a small utility chrome extension that allows for one-click page editing.

This is all you need to do to activate it.

  1. Contentful Space ID

  2. Contentful Environment Name

  3. entryid should be visible in the page meta property.

Download the free chrome extension

Download Contentful Quick Edit chrome extension.

(Please note: it's got Breeze branding, as we used the chrome extension framework for Breeze Website Management Tool)

Getting Entry for Nextjs Dynamic Pages

Go to dynamic routes template eg [servicesurl].js

Connect to contentful Client

Get Entry from Contentful Client and map the data (eg servicesdata)

contentful-contentful-client

Print the system id into the meta component

contentful-seo

Display the entityid within the page meta

SEO Nextjs

When you run Nexjs, you should see the value in the page meta

contentful-next-js-meta

Getting Entry for Gatsby Dynamic Pages

Go to gatsby-node.js

Fetch contentful_id when you are loading all page entries (eg allContentfullPage )

gatsby node

In CreatePage function pass contentful_id from graphql data as page context

gatsby pageTemplate

Go to pageTemplate Component.

In PageContext request entryid

gatsby-pageContext

Display the entryid within the page meta array includes (we are using react Helmet package for meta tag here)

gatsby-entryid-individual

if you have specific SEO components, you can include them in there

gatsby-entryid-SEO

When you run Gatsby, you should see the value in the page meta

contentful-gatsby-meta

#contentful #headlesscms #digitalagency #websitemanagement