Deploying Sitecore XM Cloud on Vercel | L&G Consultancy

Prepare the GitHub Repository

1. Create a public GitHub repository and commit/push your code.

2. Set environment-specific values in the .env file.

3. If you’ve made content or layout changes in your local XM environment, use the Sitecore CLI to publish those changes and verify that the content is available on Experience Edge.

4. In your XM Cloud instance, publish all content and layout changes you want reflected on the live site.

Connect Your GitHub Repository to Vercel

1. Sign in to Vercel at vercel.com.

   

2. You can log in using GitHub authentication, or navigate to:
   Profile Icon → Account Settings → Authentication to connect GitHub manually.

   

3. It is recommended to install the Vercel GitHub App by visiting: https://github.com/apps/vercel

   • Click on Configure
     

   • Select Github Account
     

   • Grant access to your GitHub account and repositories.
     

Skipping above steps may lead to deployment issues.

Deployment Setup in Vercel

1. Go to the Vercel Dashboard → Add New → Project
   

2. Click “Continue with GitHub”, then select your GitHub account and the desired repository.

   

3. Provide a project name.

   

4. Choose the framework preset — in our case, select Next.js.

   

5. Set the Root Directory to headapps/nextjs-starter.

   

6. Add Environment Variables

Manually add the following environment variables as key-value pairs (or import from .env):

PUBLIC_URL

GRAPH_QL_ENDPOINT

SITECORE_API_HOST

SITECORE_SITE_NAME

SITECORE_API_KEY

SITECORE_EDGE_CONTEXT_ID

7. Once done, click “Deploy”.

Live Deployment

• Vercel will now show the deployment progress in real-time.

  

• It automatically optimizes your Next.js app, including static generation and serverless functions.

• Once deployment completes, Vercel provides an instant preview URL for your live app.

  

• You can also configure a custom domain via the “Add Domain” page in the dashboard.

  

References