By the end of this post, you’ll have a Next.js app connected to XM Cloud, fetching data from Sitecore Edge via GraphQL.

Why Next.js for XM Cloud?

Sitecore recommends Next.js because:

• Native support in XM Cloud templates
• Optimized for SSG (Static Site Generation) and SSR (Server-Side Rendering)
• Excellent developer experience
• Seamless integration with Vercel hosting (optional)
• Strong community & ecosystem

While XM Cloud is front-end agnostic, Next.js provides the smoothest developer workflow.

Step 1: Prerequisites

Make sure you have:

• Node.js (LTS recommended, e.g. 18.x)
• npm or yarn
• Sitecore CLI installed (npm install -g @sitecore-cli)
• An XM Cloud project with Edge endpoints

Step 2: Scaffold a Next.js App

XM Cloud includes a ready-to-use starter template.

Run the following:

npx create-sitecore-jss --templates sitecore-xmcloud-foundation

This generates:

• A Next.js app
• Sitecore JSS integration
• Configuration for Edge endpoints
• Example components and routes

Step 3: Configure Edge Endpoint

Update your .env.local file in the Next.js project:

SITECORE_EDGE_ENDPOINT=https://edge.sitecorecloud.io/api/graphql/{your-project-id}
SITECORE_API_KEY={your-edge-api-key}

This ensures your app connects to your XM Cloud environment.

Step 4: Add a Simple Component

Inside /components, create HeroBanner.tsx:

const HeroBanner = ({ fields }) => (
  <section className="hero">
    <h1>{fields.title?.value}</h1>
    <p>{fields.subtitle?.value}</p>
  </section>
);

export default HeroBanner;

Register it in your componentFactory.ts so XM Cloud recognizes it.

Step 5: Query Content via GraphQL

Use Sitecore’s GraphQL SDK (graphql-request or Apollo). Example with graphql-request:

import { request, gql } from 'graphql-request';

const endpoint = process.env.SITECORE_EDGE_ENDPOINT;

const query = gql`
  {
    item(path: "/sitecore/content/home") {
      id
      name
      fields {
        name
        value
      }
    }
  }
`;

export async function getStaticProps() {
  const data = await request(endpoint, query, {
    headers: { sc_apikey: process.env.SITECORE_API_KEY },
  });
  return { props: { data } };
}

Now your Home page can render fields directly from XM Cloud.

Step 6: Run Your App

Run locally with:

npm run dev

Visit: http://localhost:3000
You should see your content (like Home item title) rendered dynamically from XM Cloud.

Step 7: Deploying the Front-End

For production hosting:

• Option 1: Deploy via XM Cloud Deploy App (GitHub Actions)
• Option 2: Deploy directly to Vercel (ideal for Next.js apps)
• Option 3: Deploy to Azure Static Web Apps or Netlify

In most projects, Vercel is the recommended hosting partner for XM Cloud front-ends.

In the next blog, we’ll dive into personalization and analytics in XM Cloud—what comes out of the box, and how to integrate with CDP & Personalize.

P.S. The blog content is rephrased by AI!

Thank you.. Keep Learning.. Keep Sitecoring.. 🙂

References

• Sitecore XM Cloud Developer Docs
• Next.js with Sitecore JSS
• GraphQL for Sitecore Edge
• Vercel + Next.js Deployment Guide