Setting Up Sitecore XM Cloud with Next.js and deploy to Vercel

Sitecore XM Cloud with Next.js Deployment via Vercel - Quick Guide

This guide walks you through setting up a Sitecore XM Cloud project with a Next.js front end and deploying it via Vercel for efficient CI/CD and modern hosting.

1. Start with XM Cloud Deploy
- Log in at Sitecore Portal
- Go to "XM Cloud Deploy" → create a new project with a unique name
- Link a GitHub repo using the XM Cloud template

2. Set Up Authoring Environment
- Create a dev environment
- Enable "Auto deploy on push"
- Review settings and start deployment

3. Deployment Workflow
- GitHub repo is created using xmcloud-foundation-head
- CM environment is provisioned
- Solution (Sitecore + Next.js) is built
- Artifacts deployed: backend to CM, frontend to rendering host

4. Create a Site
- Go to Projects → Environments → Sites
- Click "Create site"
- Select the Basic template
- Configure site name, language, and analytics ID
- Site creation completes in ~2 minutes

5. Local Development Setup
- Clone your GitHub repo
- Run: npm install
- Add env variables from portal to headapps/nextjs-starter/.env
- Start app: npm run start:connected
- Visit: http://localhost:3000

6. Deploy to Vercel
- In Portal → Sites → 3-dot menu → Set up hosting
- Choose/create Vercel install
- Push code to GitHub
- On Vercel, import project, set root directory
- Add env variables:
SITECORE_EDGE_CONTEXT_ID
SITECORE_SITE_NAME
JSS_EDITING_SECRET
- Click "Deploy"

Takeaway:
Combining Sitecore XM Cloud with Next.js and Vercel provides fast deployment, auto-builds, real-time previews, and scalable hosting. Ideal for high-performance content delivery.