Deploying Sitecore XM Cloud Frontend (Next.js) on Vercel


In my previous blog, I discussed how we can deploy a Sitecore XM Cloud frontend built with Next.js to Netlify.
Today, we'll explore how to deploy the XM Cloud frontend on Vercel—a cloud-based platform officially recommended by Sitecore for Jamstack-based Next.js deployments.

In this post, we’ll walk through the steps to deploy a website integrated with Sitecore XM Cloud using Vercel.

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.


Conclusion

Deploying a Sitecore XM Cloud integrated Next.js application on Vercel is a straightforward and efficient process. With Vercel's seamless GitHub integration, real-time deployment previews, and built-in support for modern frameworks like Next.js, it offers a developer-friendly and scalable solution for headless CMS deployments. By properly configuring environment variables and deployment settings, you can ensure a smooth and automated workflow for your frontend delivery.

References


Location: Kolkata, West Bengal, India

Comments

Post a Comment

Popular posts from this blog

Setup New Project in Sitecore XMCloud – Part 1

Image
In my previous blog , I discussed about the XMCloud Introduction and features of XMCloud. In this blog I will show, how to create a new Project and environments in the Sitecore XM cloud. In the next blog, I will show how easily you can set up your local app development for XM Cloud and run the Sitecore XM Cloud project on your development machine. Prerequisites: • You must have one Organization account in Sitecore portal ( https://portal.sitecorecloud.io/ ) which has access to XMCloud.  And your account should be associated with that Organization account with admin access.  • Organization must have proper Sitecore licensing to run the XMCloud site in local docker environments. • Create your own Github account to link with XMCloud project. Steps to setup your project 1. Click on “Manage My projects” menu to open https://deploy.sitecorecloud.io/projects.io/projects site to Create a new project or manage existing one. 2. Then click on “Create New Project” button to cr...
Read more

Step by Step installation of Sitecore 10.3 on Azure PaaS

Image
  In this document we will learn how to setup Sitecore 10.3 XP on Azure PaaS. We shall briefly cover the step by step process and overview of Sitecore 10.3 XP setup. While doing the installation, I follow Deploying a new Sitecore environment to the Microsoft Azure App service . Thanks, Sitecore Team! Prerequisites: To setup Sitecore 10.3 on Azure PaaS, we shall need the following: Check PowerShellGet Module. If not found please install PowerShell Gallery Install the Azure Az PowerShell module. Download Sitecore Azure Toolkit 2.8.0 . This will provide a zip file that can be extracted and used for setup.  Deployment Topologies We will do the setup for Sitecore 10.3 XP. Sitecore XP product edition is the full Sitecore Experience Platform, which includes all Sitecore roles and services, including xConnect. This is a Sitecore Experience Platform configuration that runs: Three Sitecore roles: Content Delivery, Content Management, and Processing, as a single WebA...
Read more

Step by Step installation of Sitecore 10.3 on Docker

Image
  In this document, we will learn how to setup Sitecore 10.3 on docker desktop in Windows 11. We shall briefly cover the step-by-step process and overview of Sitecore 10.3 setup. While doing the installation in my windows, I followed Installation Guide for Developer Workstation with Containers . Thanks, Sitecore Team! Prerequisites - To setup Sitecore 10.3 on docker, we shall need the following - Docker Desktop Installed on Windows Desktop Docker Desktop support for windows containers 16 GB of RAM Approximately 50GB of free disk space for Sitecore container images. SSD storage is highly recommended. The default Sitecore container configuration uses specific ports. To avoid any conflicts, we should ensure the following ports are not being used by another process: 443, 8079, 8081, 8984, and 14330 To check the prerequisites for Sitecore 10.3 installation, please check the below link - Support Information - Sitecore compatibility table for Sitecore XP 9.0 and later Setup Files - Docker...
Read more