Sitecore XM Cloud Next.js Starter

The Sitecore XM Cloud Next.js Starter is a Vercel-maintained Next.js example that connects a front-end site to Sitecore XM Cloud through the Sitecore JavaScript Rendering SDK (JSS), including example components and headless SXA configuration.

What is the Sitecore XM Cloud Next.js Starter?

This starter is a Next.js application that renders content from a Sitecore XM Cloud project. It uses the Sitecore JavaScript Rendering SDK (JSS) to fetch data and includes example components plus headless Sitecore Experience Accelerator (SXA) configuration. The template is distributed as part of Vercel's next.js examples repository and can be bootstrapped with create-next-app. It outputs a blog-style site that depends on a Sitecore XM Cloud backend for its content and layout.

Key Features

• Next.js foundation — Built on the Next.js React framework, the starter inherits the full Next.js ecosystem (static generation, server-side rendering, and API routes) for rendering Sitecore content.
• Sitecore JSS integration — Uses the Sitecore JavaScript Rendering SDK to connect the Next.js front end to a Sitecore XM Cloud site, replacing a traditional Sitecore rendering host.
• Headless SXA examples — Ships with example components and configuration for headless Sitecore Experience Accelerator, letting you reuse SXA site structure and features.
• Flexible data fetching — The FETCH_WITH environment variable switches between GraphQL and REST when calling the Sitecore API, supporting either Sitecore Experience Edge GraphQL endpoint or Sitecore REST APIs.
• One-click Vercel deployment — The Deploy button clones the repository and creates a Vercel project with prompts for the required environment variables (JSS_APP_NAME, GRAPH_QL_ENDPOINT, SITECORE_API_KEY, SITECORE_API_HOST, FETCH_WITH).
• create-next-app scaffolding — You can start a new project with npx create-next-app --example cms-sitecore-xmcloud, or with Yarn or pnpm equivalents.

Who is it for?

• Next.js developers integrating Sitecore XM Cloud as a CMS — this starter shows the exact environment variables and JSS setup needed.
• Sitecore teams moving to headless — the example components and SXA configuration demonstrate how a Sitecore site is structured outside the traditional Sitecore rendering host.
• Vercel users — the template is designed to deploy directly to Vercel with the Sitecore integration, making it a starting point for production Sitecore-on-Vercel projects.

What can you do with the Sitecore XM Cloud Next.js Starter?

• Build a Sitecore-backed blog — the demo is described as a simple Next.js blog site that fetches its content from a Sitecore XM Cloud site.
• Deploy a Sitecore site to Vercel — use the Deploy Button to provision a Vercel project, set the five environment variables, and connect it to an existing XM Cloud project.
• Learn the JSS integration pattern — study the starter's components and configuration as a reference for adding Sitecore to any Next.js app.

How does it work?

After bootstrapping with create-next-app, you configure the starter by setting five environment variables: JSS_APP_NAME (the JSS app name configured in XM Cloud), GRAPH_QL_ENDPOINT (the Sitecore Experience Edge GraphQL endpoint), SITECORE_API_KEY (the Sitecore API key), SITECORE_API_HOST (the Sitecore API host), and FETCH_WITH (GraphQL or REST). Then, running the Next.js dev server or deploying to Vercel makes the app request content from Sitecore and render it as a website.

FAQ

Is the Sitecore XM Cloud Next.js Starter free?

The starter template itself is open source and free to use, distributed through Vercel's next.js examples repository. Running it requires a Sitecore XM Cloud subscription and, if you deploy to Vercel, that platform's hosting costs apply.

What is headless SXA?

Headless Sitecore Experience Accelerator (SXA) is Sitecore's set of site-building features that work with headless implementations. This starter includes example components and configuration for headless SXA so you can see how SXA sites integrate with a Next.js front end.

Does the starter work without Sitecore XM Cloud?

No. The Next.js app needs a Sitecore XM Cloud project to supply content, layout, and the JSS app name. Without the XM Cloud environment variables (JSS_APP_NAME, GRAPH_QL_ENDPOINT, SITECORE_API_KEY, SITECORE_API_HOST), the site cannot fetch anything to render.

Can I switch between GraphQL and REST?

Yes. The FETCH_WITH environment variable accepts either GraphQL or REST, letting you choose how the Next.js app communicates with the Sitecore API.