--- title: "Sitecore XM Cloud Next.js Starter" description: "Simple Next.js blog site that connects to a Sitecore XM Cloud site using the Sitecore JavaScript Rendering SDK (JSS)." url: "https://vercel.com/templates/next.js/sitecore-starter" links: repository: "https://github.com/vercel/next.js/tree/canary/examples/cms-sitecore-xmcloud" demo: "https://vercel-sitecore-xmcloud-demo.vercel.app/" deploy: "https://vercel.com/new/clone?demo-title=Sitecore+XM+Cloud+Next.js+Starter&demo-description=Simple+Next.js+blog+site+that+connects+to+a+Sitecore+XM+Cloud+site+using+the+Sitecore+JavaScript+Rendering+SDK+%28JSS%29.&demo-url=https%3A%2F%2Fvercel-sitecore-xmcloud-demo.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2FJAWlcS27EakxvDFRjmLwD%2F412631142afd83d7b3a926cb7c3e44bd%2FCleanShot_2023-08-25_at_20.09.25_2x.png&project-name=Sitecore+XM+Cloud+Next.js+Starter&repository-name=sitecore-starter&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fcms-sitecore-xmcloud&from=templates&skippable-integrations=1&env=JSS_APP_NAME%2CSITECORE_API_KEY%2CSITECORE_API_HOST%2CGRAPH_QL_ENDPOINT%2CFETCH_WITH&envDescription=Instructions+on+how+to+get+these+env+vars&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fcms-sitecore-xmcloud%2F.env.example" --- # Sitecore XM Cloud Next.js Starter Simple Next.js blog site that connects to a Sitecore XM Cloud site using the Sitecore JavaScript Rendering SDK (JSS). # A Next.js Example Using Sitecore JSS and Sitecore XM Cloud This example connects to a Sitecore XM Cloud site using the Sitecore JavaScript Rendering SDK (JSS) for Next.js and includes example components and configuration for headless SXA (Sitecore Experience Accelerator). For more information on creating and deploying a headless Sitecore solution to XM Cloud please refer to [Vercel's Sitecore XM Cloud Integration Guide](https://vercel.com/docs/integrations/sitecore) or official [Sitecore documentation](https://doc.sitecore.com/xmc/en/developers/xm-cloud/create-an-xm-cloud-project-from-a-starter-template-in-the-xm-cloud-deploy-app.html). ## Demo ### [https://vercel-sitecore-xmcloud-demo.vercel.app](https://vercel-sitecore-xmcloud-demo.vercel.app) ## Deploy your own Using the Deploy Button below, you'll deploy the Next.js project as well as connect it to your XM Cloud project with the required environment variables. [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-title=Sitecore+XM+Cloud+Next.js+Starter&demo-description=Simple+Next.js+blog+site+that+connects+to+a+Sitecore+XM+Cloud+site+using+the+Sitecore+JavaScript+Rendering+SDK+%28JSS%29.&demo-url=https%3A%2F%2Fvercel-sitecore-xmcloud-demo.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2FJAWlcS27EakxvDFRjmLwD%2F412631142afd83d7b3a926cb7c3e44bd%2FCleanShot_2023-08-25_at_20.09.25_2x.png&project-name=Sitecore+XM+Cloud+Next.js+Starter&repository-name=sitecore-starter&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fcms-sitecore-xmcloud&from=templates&skippable-integrations=1&env=JSS_APP_NAME%2CSITECORE_API_KEY%2CSITECORE_API_HOST%2CGRAPH_QL_ENDPOINT%2CFETCH_WITH&envDescription=Instructions+on+how+to+get+these+env+vars&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fcms-sitecore-xmcloud%2F.env.example) - `JSS_APP_NAME`: The name of the JSS app that is configured in XM Cloud. - `GRAPH_QL_ENDPOINT`: The GraphQL Edge endpoint. This is required for Sitecore Experience Edge. - `SITECORE_API_KEY`: The Sitecore API key is required to build the app. - `SITECORE_API_HOST`: The host of the Sitecore API. - `FETCH_WITH`: The fetch method to the Sitecore API. This can be either `GraphQL` or `REST`. ### Related examples - [AgilityCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms) - [Builder.io](https://github.com/vercel/next.js/tree/canary/examples/cms-builder-io) - [ButterCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms) - [Contentful](https://github.com/vercel/next.js/tree/canary/examples/cms-contentful) - [Cosmic](https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic) - [DatoCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-datocms) - [DotCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-dotcms) - [Drupal](https://github.com/vercel/next.js/tree/canary/examples/cms-drupal) - [Enterspeed](https://github.com/vercel/next.js/tree/canary/examples/cms-enterspeed) - [Ghost](https://github.com/vercel/next.js/tree/canary/examples/cms-ghost) - [GraphCMS](https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms) - [Kontent.ai](https://github.com/vercel/next.js/tree/canary/examples/cms-kontent-ai) - [MakeSwift](https://github.com/vercel/next.js/tree/canary/examples/cms-makeswift) - [Payload](https://github.com/vercel/next.js/tree/canary/examples/cms-payload) - [Plasmic](https://github.com/vercel/next.js/tree/canary/examples/cms-plasmic) - [Prepr](https://github.com/vercel/next.js/tree/canary/examples/cms-prepr) - [Prismic](https://github.com/vercel/next.js/tree/canary/examples/cms-prismic) - [Sanity](https://github.com/vercel/next.js/tree/canary/examples/cms-sanity) - [Sitecore XM Cloud](https://github.com/vercel/next.js/tree/canary/examples/cms-sitecore-xmcloud) - [Sitefinity](https://github.com/vercel/next.js/tree/canary/examples/cms-sitefinity) - [Storyblok](https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok) - [TakeShape](https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape) - [Tina](https://github.com/vercel/next.js/tree/canary/examples/cms-tina) - [Umbraco](https://github.com/vercel/next.js/tree/canary/examples/cms-umbraco) - [Umbraco heartcore](https://github.com/vercel/next.js/tree/canary/examples/cms-umbraco-heartcore) - [Webiny](https://github.com/vercel/next.js/tree/canary/examples/cms-webiny) - [WordPress](https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress) - [Blog Starter](https://github.com/vercel/next.js/tree/canary/examples/blog-starter) ## How to use Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash npx create-next-app --example cms-sitecore-xmcloud cms-sitecore-xmcloud-app ``` ```bash yarn create next-app --example cms-sitecore-xmcloud cms-sitecore-xmcloud-app ``` ```bash pnpm create next-app --example cms-sitecore-xmcloud cms-sitecore-xmcloud-app ``` ## Configuration To configure and run this example you can follow our [Sitecore XM Cloud Integration Guide](https://vercel.com/docs/integrations/sitecore) ## Related Templates ### [Stablo – Minimal Blog Template](https://vercel.com/templates/next.js/stablo-blog) A minimal blog website template built with Next.js, TailwindCSS & Sanity CMS ### [Next.js Blog with Draft Mode](https://vercel.com/templates/next.js/nextjs-blog-draft-mode) Static blog with Preview Mode, built with Next.js and Contentful. --- ## Additional documentation The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.