Sitecore XM Cloud Next.js Starter

The provided information outlines an example of a Next.js project using Sitecore JSS (JavaScript Rendering SDK) and Sitecore XM Cloud, which allows you to connect to a Sitecore XM Cloud site and build headless applications. Here’s an overview of how to use this example:

Demo:

You can check out the demo of this Next.js project that connects to Sitecore XM Cloud here: Demo

Deploy Your Own:

To deploy your own instance of this Next.js project and connect it to your Sitecore XM Cloud project, you can use the “Deploy Button” provided with the necessary environment variables:

• JSS_APP_NAME: The name of the JSS app configured in XM Cloud.
• GRAPH_QL_ENDPOINT: The GraphQL Edge endpoint required for Sitecore Experience Edge.
• SITECORE_API_KEY: The Sitecore API key required to build the app.
• SITECORE_API_HOST: The host of the Sitecore API.
• FETCH_WITH: The fetch method to the Sitecore API, which can be either GraphQL or REST.

Follow these steps:

1. Click the “Deploy Button” to start the deployment process.
2. You will be prompted to enter the required environment variables mentioned above.
3. Once the deployment is complete, your Next.js project will be connected to your Sitecore XM Cloud project.

Configuration:

For more detailed configuration and usage instructions, you can refer to the “Sitecore XM Cloud Integration Guide” provided by Vercel or the official Sitecore documentation.

This example demonstrates how to create a Next.js application that interacts with Sitecore XM Cloud, allowing you to build headless applications with Sitecore’s content management capabilities.