For the scenario of independent deployment of your NextJs static site, say in an automated deployment, one missing piece is a way to push the SSG site into Vercel.
Here I provided a simple deployment script using the Vercel CLI of the static site in the XM Cloud project.
Code:
# Set up variables with your Vercel project and Sitecore XM Cloud environment details
$VercelProjectName = "POC Project"
$VercelToken = "xxxxxxxxxxxxxxx"
# Set up the path to the Next.js project subfolder
$nextjsSubfolderPath = "../src/sxastarter"
#Store current location
$currentDir = Get-Location
# Check if the Vercel CLI is installed
if (-not (Get-Command Vercel -ErrorAction SilentlyContinue)) {
# Install the Vercel CLI using npm
npm install -g Vercel
}
# Change to the Next.js project subfolder
cd $nextjsSubfolderPath
# Log in to your Vercel account
Vercel login
# Deploy the project using the Vercel CLI
Vercel deploy --prod --token $VercelToken
# Change back to the original directory
cd $currentDir
The script is really simple but accomplishes a lot utilizing the Vercel cli. To start you will need a Vercel auth token, which can be generated from your Vercel account
Next point of interest is actually using the Vercel cli to do the deployment (details of which can be found at https://Vercel.com/docs/cli/deploy), providing the deployment parameters and your token.
Script output is as follows
-
Login to Vercel using Github or the other SSO participants
-
Confirmation of successful login to Vercel
-
Vercel Cli attempts to upload the current source code from the indicated directory
-
Successful upload and build
-
View the deployment on the Vercel site
With this script, you can further automate you deployments of the static sites from your local XM Cloud into Vercel.
Key points to note:
- Environment Variables:- Remember to setup your Sitecore environment variables in Vercel
- Setup Github Repo:- Connecting your Github repo to your Vercel project enables real-time builds on branch commits
