The Content Hub ONE NextJS starter kit is intended to help you begin Content Hub ONE development quickly. It includes useful functionalities, such as the handling of GraphQL JSON output conversion to HTML for rich text, media fields, and references and contains a small sample implementation that you can use to start building customer projects on.

This is a Next.js project bootstrapped with create-next-app.

More Information about Content Hub ONE, including video tutorials, is available from the Developer Portal.

To use this starter kit you require

• a Content Hub ONE tenant. Find more information here: https://www.sitecore.com/products/content-hub-one
• node.js incl. npm you can download it here
• for installing the Github CLI and the CH-ONE CLI chocolatey can be helpful. You can download it from here
• Github CLI

You can install the Content Hub ONE CLI using chocolatey:

choco install Sitecore.ContentHubOne.Cli --source https://nuget.sitecore.com/resources/v2/

For more information see CLI documentation.

You can login to several Content Hub ONE instances but one needs to be set active.

To login and add your tenant run:

ch-one-cli tenant add \
--organization-id <Organization ID> \
--tenant-id <Tenant ID> \
--client-id <Client credentials: OAuth client ID> \
--client-secret <Client credentials: OAuth client secret>

For more information check: Log in with the Content Hub ONE CLI

Clone this repository to your local drive.

In the root of your repository folder, run the following command:

npm install

Copy the .env.example file to your repository root and rename it to ".env".

Provide the following parameters:

SITECORE_CLIENT_ID --> You can find the Client Id in the Content Hub ONE app under 'Settings'>'OAuthClient'>'Client Credentials'

SITECORE_CLIENT_SECRET --> You can find the Client Secret in the Content Hub ONE app under 'Settings'>'OAuthClient'>'Client Credentials'

This is required when uploading the demo images using the setup.js.

SITECORE_ENDPOINT_URL --> Here you need the Delivery API Url, for example, https://edge.sitecorecloud.io/api/graphql/v1. More Information you find in the Delivery API documentation.

SITECORE_DEV_AUTH_TOKEN --> In Content Hub ONE, create an API key. This can be done through the Content Hub ONE app, CLI, or Content Management API

This is required to connect your app with the Content Hub ONE tenant.

The starter kit uses images, content types and content items. To install those to your Content Hub ONE tenant use your command prompt.

Navigate to the root of the app (content-hub-one-nextjs-starterkit).

run in the root of your app directory:

node setup

The Script will push the images to your environment, next the content types and last the content items.

The script is re-runnable.

To make the newly created images and content items available on the content delivery API (GraphQl endpoint on Edge) you need to publish.

run in the root of your app directory:

node publish

The Script will publish all the required items. Please note that publishing is just being scheduled and can take up to a few minutes after finish of the script.

The script is re-runnable.

navigate back to the root folder of your application/repo and run the development server:

npm run dev
# or
yarn dev

To see the result, open http://localhost:3000 in your browser.

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

See the Next.js deployment documentation for more information.

In case you want to remove all content items, content types or images installed by starter kit use the command prompt and navigate to the root of your app directory.

First content items and images need to be unpublished.

run in your app root directory:

node unpublish

The Script will unpublish all the required items. Please note that unpublishing is just being scheduled and can take up to a few minutes after finish of the script.

The script is re-runnable.

Make sure that the content has been unpublished. You can check that in the Content Hub ONE editing UI.

run in your app root directory:

node remove

The script is re-runnable.