A statically generated blog example using Next.js and Sitecore Experience Edge (Edge for Content Hub).

This example showcases Next.js's Static Generation feature using Sitecore Experience Edge for Content Hub as the data source.

Live Demo

nextjs-sitecore-blog.vercel.app

Configuration

Prerequisites

To use this project, you need to have your Sitecore Content Hub sandbox up and running with content publishing enabled.

This project uses the content schema and content entities provided with the Lighthouse Template.

For more information: https://docs.stylelabs.com/contenthub/4.1.x/content/user-documentation/experience-edge/content-delivery/prerequisites.html

Prepare you content hub sandbox

STEP 1. Create Content Collection

First, Follow The Quickstart Guide to create a content collection and publish the content collection.

STEP 2. Create Preview and Delivery API Tokens

The Delivery Platform provides 2 GraphQL APIs:

• Preview API exposing a preview of the content. Optimized for live access of the latest data.
• Delivery API exposes your published content with an identical structure to the Preview API. It is optimized for performance and high availability.

To create an authentication key for the Delivery API:

1. On the main menu bar, click Content and select Content collections.
2. On the Content collections page, select the content collection for which you want to create an API key.
3. On the Collection detail page, on the upper right, click More actions dots icon and then select API keys icon API keys.
4. In the API keys dialog box, click + API key.
5. In the API keys dialog box, enter a name for the key and select Preview then click Create.
6. Copy and save for future use the generated token which represents your API key.
7. Repeat Step 5 and 6 for the delivery API Key.

Ready to go?!

You can deploy this app to the cloud with Vercel (Documentation). Use the Deploy Button in this section Deploy your own

Or if you need to work locally and make some changes, go to Manual Setup

Deploy your own

Using the Deploy Button below, you'll deploy the Next.js project as well as connect it to your Sitecore Content Hub sandbox using Vercel.

Manual Setup

STEP 1. Setup environment variables

Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

Then set each variable on .env.local:

• SITECORE_CONTENTHUB_PUBLIC_URL should be the Content Hub Instance Url
• SITECORE_CONTENTHUB_EDGE_DELIVERY_ENDPOINT should be https://edge-beta.sitecorecloud.io/api/graphql/v1
• SITECORE_CONTENTHUB_PREVIEW_ACCESS_TOKEN should be the Preview API Key
• SITECORE_CONTENTHUB_DELIVERY_ACCESS_TOKEN should be the Delivery API Key
• SITECORE_CONTENTHUB_CONTENTCOLLECTION_NAME should be the collection name createdas source for this blog example.

Your .env.local file should look like this:

SITECORE_CONTENTHUB_PUBLIC_URL=https://[your-sandbox-name].stylelabs.io
SITECORE_CONTENTHUB_EDGE_DELIVERY_ENDPOINT=https://edge-beta.sitecorecloud.io/api/graphql/v1
SITECORE_CONTENTHUB_PREVIEW_ACCESS_TOKEN=...
SITECORE_CONTENTHUB_DELIVERY_ACCESS_TOKEN=...
SITECORE_CONTENTHUB_CONTENTCOLLECTION_NAME=Lighthouse Blog

STEP 2. Run Next.js in development mode

Run Next.js in development mode

npm install
npm run dev

# or

yarn install
yarn dev

Your blog should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.

STEP 3. Deploy on Vercel

To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.

Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local file.

Related examples

• WordPress
• DatoCMS
• Sanity
• TakeShape
• Prismic
• Strapi
• Agility CMS
• Cosmic
• ButterCMS
• Storyblok
• GraphCMS
• Kontent
• Ghost
• Blog Starter

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example cms-sitecore cms-sitecore-app
# or
yarn create next-app --example cms-sitecore cms-sitecore-app