Skip to main content

Walkthrough: Deploying your front-end application to Vercel

Abstract

Deploy a JSS Next.js app to Vercel and configure webhooks for automatic redeployments.

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 to see the deployment process. In the video, the publishing is done from the XM Cloud Content Management instance.

To deploy the application to Vercel:

  1. Generate an Edge access 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.

  2. Publish and verify that your content is on Edge (CLI version).

  3. Commit and push your changes to your GitHub repository.

  4. In the browser, go to vercel.com. Log in or sign up for an account.

  5. In the Vercel dashboard, create a new project by importing your solution repository.

  6. Enter the Project name.

  7. In the Root directory field, enter the path to the root folder of the Next.js application. When using the Next.js XM Cloud Starter Kit, the path is src/sxastarter.

  8. Expand the Environment variables panel and enter the following variables:

    • SITECORE_API_KEY - the Edge access token. Enter the previously generated token.

    • GRAPH_QL_ENDPOINT - https://edge.sitecorecloud.io/api/graphql/v1 . The GRAPH_QL_ENDPOINT is required for Sitecore Experience Edge. By default, the endpoint is calculated using the resolved Sitecore API hostname and the config.graphQLEndpointPath option defined in your package.json file.

    • JSS_APP_NAME - the name of your site. For example, XM Cloud Demo. It overrides the value set in the package.json file. Provide this variable if using a single JSS app to render multiple sites.

    • If your application includes the Next.js Personalize add-on, add the personalization-specific environment variables.

  9. Click Deploy. You can see a deployment preview of the website.

  10. 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:

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

  2. 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>"
      }
    }
    
  3. To verify the request was completed successfully, check that you received a 201 Created response status code.

  4. Make some changes in Sitecore and publish them.

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