Walkthrough: Deploying your front-end application to Vercel

Version:

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:

Deploy the Next.js JSS app to Vercel.
Configure webhooks to redeploy the app with updated content.

Deploy the Next.js JSS app to Vercel

Before deploying the Next.js JSS app, watch the following video guide for the deployment process. In the video, the publishing is done from the XM Cloud Content Management instance.

XM Cloud is now SitecoreAI

Some code examples, images, and UI labels may still use XM Cloud while engineering assets are being updated.

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

Generate an Edge API token. You use this token to verify that your content is published to Edge and as a value for the SITECORE_API_KEY environment variable.
Publish and verify that your content is on Edge (CLI version).
Commit and push your changes to your GitHub repository.
In the browser, go to vercel.com. Log in or sign up for an account.
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.

XM Cloud is now SitecoreAI

Some code examples, images, and UI labels may still use XM Cloud while engineering assets are being updated.
Expand the Environment variables panel and enter the following variables:
- SITECORE_API_KEY - the Edge API key. Enter the previously generated token.
- GRAPH_QL_ENDPOINT - https://edge.sitecorecloud.io/api/graphql/v1
- JSS_APP_NAME - the name of your site. For example, SitecoreAI Demo. It overrides the value set in the package.json file. Provide this variable if using the deployment to render a single site.
- If your application includes the Next.js Personalize add-on, add the personalization-specific environment variables.
- If you are building a very large website, enable retries for requests to the SitecoreAI Experience Edge GraphQL endpoint.
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 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, you must obtain 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:

{
  "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.

If you have suggestions for improving this article, let us know!