Deploy your front-end application to Vercel

Vercel is an all-in-one platform with Global CDNs, supporting the deployment and delivery of static and Jamstack apps. Vercel has first-class support for Next.js.

This walkthrough describes how to:

Prepare for the deployment.
Set up continuous deployment for the Next.js JSS app on Vercel.
Configure webhooks to redeploy the app with updated content.

After completing this walkthrough, your application will automatically redeploy when you publish new items or merge/push code changes to your Git repository.

Prepare for deployment

Before deploying your Next.js JSS app to Vercel, you must ensure you have all the necessary environment variables ready and all the changes you want to deploy pushed in the repository and the branch you want to use for the deployment.

To prepare for the deployment of an application that uses GraphQL and Edge for fetching content and layout data:

If you made code changes in your local development environment, commit and push your code. If you set up your XM Cloud environment to redeploy when pushing changes to the configured branch, allow the redeployment to complete.
If you made content and layout changes in a local XM environment, use the Sitecore CLI to publish your changes and verify that your content is on Edge.
In your XM Cloud instance, publish all the changes you want to make available on your website.

On Vercel:

In your Next.js application:

Commit and push your changes to your Git repository.

Set up continuous deployment (CD) for the Next.js JSS app on Vercel

To automatically deploy your front-end application when you push changes in your repository, you must create a Vercel project, and configure the build process and environment variables. In this scenario, we assume you are deploying the Next.js application from the XM Cloud project repository, which includes the XM instance and the front-end solution.

To set up the automatic deployment of the Next.js application to Vercel:

In the browser, go to vercel.com.
In the Vercel dashboard, create a new project by importing your solution repository.
Enter the Project name.
In the Root directory field, enter the path to the root folder of the Next.js application. When using the Next.js XM Cloud foundation template, the path is src/sxastarter.
Expand the Environment variables panel and enter the following variables:
- SITECORE_EDGE_CONTEXT_ID - Your unified Context ID. Use the Preview Context ID for all content and layout data, or the Live Context ID for published data only.
- SITECORE_SITE_NAME - the name of the site.
- If you are building a very large website, enable retries for requests to the XM Cloud Experience Edge GraphQL endpoint, by setting the GRAPH_QL_SERVICE_RETRIES to a value higher than 0.
- Any other custom environment variables you've added to your .env file. Vercel recommends that all environment variables be added to the Vercel site configuration.
  
  Note
  
  You don't need to set environment variables for Personalize and other Sitecore product integrations. They are included in your Sitecore Context and automatically provided to the application and integrations. An exception is Sitecore Search.
Click Deploy. You can see a deployment preview of the website.
When the Vercel deployment process finishes, verify that the deployed application hosted by Vercel renders as expected.

Tip

This procedure uses Vercel as an example, but you can use other platforms, such as Netlify, to host your Next.js applications. You can host them using a self-hosted Node.js server or Docker Images, or services that support Next.js deployments.

Configure webhooks to redeploy the app with updated content

You can use webhooks to trigger automatic redeployments of your Next.js app when new data reaches the Edge Delivery Platform.

You register, update, remove, or list webhooks using the Experience Edge Admin API.

Note

Before using the Admin API for any operations, get an authentication token.

To trigger a new deployment on Vercel when your data reaches the Edge Delivery Platform:

Create a deploy hook in Vercel and copy the URL of the webhook.

Send a POST request to the Admin API webhook endpoint https://edge.sitecorecloud.io/api/admin/v1/webhook with the following body:

RequestResponse

{
  "label": "My new webhook",
  "uri": "<your-vercel-webhook-url>",
  "method": "POST",
  "headers": {
    "Authorization": "Bearer: <edge-authentication-token>"
  }
}

To verify the request was completed successfully, check that you received a 201 Created response status code.
Make some changes in Sitecore and publish them.

The publishing process is complete when the Experience Edge finishes processing the new data, and Vercel starts a new deployment.

Do you have some feedback for us?

If you have suggestions for improving this article,