Deploy your front-end application to Vercel

Version: 22.x

Vercel is an all-in-one platform with Global Content Delivery Networks (CDNs). It supports the deployment and delivery of front-end applications and has first-class support for Next.js.

You can set up continuous deployment (CD) in Vercel to redeploy your JSS Next.js app whenever you publish code changes to your source control repository. This procedure assumes that you're deploying the Next.js application from the SitecoreAI project repository, which includes the SitecoreAI instance and the front-end solution.

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.

This procedure does not describe how to implement automatic redeploys when you make changes to your SitecoreAI content. You can decide for yourself how best to implement this, according to the recommendations provided by Vercel.

Before you begin

  • Ensure you have a Vercel account that you're logged in to.

  • Ensure you have the SITECORE_EDGE_CONTEXT_ID and SITECORE_SITE_NAME environment variables for your deployment, and any other relevant variables (including custom ones).

  • If you made code changes in your local development environment, commit and push your code. If you set up your SitecoreAI 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 environment, use the Sitecore CLI to publish your changes and verify that your content is on Edge.

  • In your SitecoreAI instance, publish all the changes you want to make available on your website.

  • In your Next.js application, commit and push your changes to your source control repository.

To deploy your front-end application to Vercel:

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

  2. Enter the Project name.

  3. 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 headapps/nextjs-starter.

    XM Cloud is now SitecoreAI

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

  4. 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 SitecoreAI 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.

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

  6. When the Vercel deployment process finishes, verify that the deployed application hosted by Vercel renders as expected.

Do you have some feedback for us?

If you have suggestions for improving this article,