XM Cloud Basics – Part 1

 🚀 Connecting Next.js with Sitecore XM Cloud: A Developer’s Guide:

With the evolution of Sitecore into a composable DXP platform, Sitecore XM Cloud stands out as the cloud-native, headless-first CMS designed for speed, scalability, and modern front-end frameworks like Next.js. In this post, we’ll walk through how to connect Next.js to Sitecore XM Cloud using the official SDKs and headless services.

🔍 What is Sitecore XM Cloud?

Sitecore XM Cloud is a SaaS version of Sitecore Experience Manager. It provides:

• Headless content delivery

• Integrated personalization

• A fully managed cloud platform

• Native support for front-end frameworks like Next.js and React

XM Cloud replaces the need for hosting your own Sitecore infrastructure, while still providing all the benefits of Sitecore's flexible content model and editing tools.

---

🛠️ Prerequisites

Before diving in, make sure you have:

• A Sitecore XM Cloud environment provisioned

• Access to the Sitecore Cloud Portal

• Node.js ≥ 18

• Next.js project (or create one via npx create-next-app)

• Familiarity with TypeScript (recommended)

---

🧩 Step 1: Install Sitecore Headless SDK

Install the Sitecore JSS for Next.js packages:

npm install @sitecore-jss/sitecore-jss-nextjs @sitecore-jss/sitecore-jss

These packages help with connecting to the Layout Service and managing routing/content.

🌐 Step 2: Configure Environment Variables

In your Next.js root folder, create a .env.local file:

SITECORE_API_HOST=https://<your-xm-cloud-endpoint>
SITECORE_API_KEY=<your-api-key>
JSS_APP_NAME=<your-app-name>
SITECORE_ENABLE_SSG=true

These values come from your XM Cloud project. You can find them in the Sitecore Cloud Portal under the Environment details.

🔁 Step 3: Setup JSS + Layout Service

Inside your Next.js project, you’ll want to integrate the Layout Service.

Update your sitecore/manifest.ts (or layout-service.ts) to fetch content from the XM Cloud endpoint:

import { dataFetcher } from '@sitecore-jss/sitecore-jss-nextjs'; export const sitecoreApiHost = process.env.SITECORE_API_HOST; export const sitecoreApiKey = process.env.SITECORE_API_KEY; export const layoutServiceFetcher = dataFetcher.createLayoutServiceFetcher({ apiHost: sitecoreApiHost, apiKey: sitecoreApiKey, });

🧱 Step 4: Routing and Page Rendering

Next.js pages are rendered using dynamic routing powered by Sitecore's content tree. Update pages/[[...path]].tsx:

import { GetStaticPropsContext, GetStaticPropsResult } from 'next';
import { SitecorePageProps, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { layoutServiceFetcher } from '../lib/layout-service';

export const getStaticProps = async (
  context: GetStaticPropsContext
): Promise<GetStaticPropsResult<SitecorePageProps>> => {
  const result = await layoutServiceFetcher.fetchLayoutData(context.params?.path || ['/']);
  return {
    props: {
      layoutData: result,
    },
  };
};

This connects your route rendering to content in Sitecore XM Cloud.

🔄 Step 5: Preview & Personalization

XM Cloud supports Edge Preview and Personalization out of the box. Use Sitecore's Experience Editor or Pages to see real-time content previews.

Make sure to allow /[[...path]].tsx to handle both SSG and SSR use cases if needed.

✅ Final Thoughts

Using Next.js with Sitecore XM Cloud gives you a modern, scalable JAMstack architecture with the full power of Sitecore’s content model. Key benefits include:

• Faster deployments via Vercel or Azure

• Seamless content authoring with Pages

• Cloud-native scalability and reduced infrastructure management