Deploy your front-end application to Vercel

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 Content SDK 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 project repository, which includes the 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 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 NEXT_PUBLIC_DEFAULT_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 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. We're using the Skate Park example from the starter JS repository for which the path is examples/kit-nextjs-skate-park.

    Important

    We're deploying the Skate Park sample in the starter repository as it contains a few components out-of-the-box. For a real project, you'll most likely start from an empty project like examples/basic-nextjs (for Next.js projects) or examples/basic-spa (for Angular projects).

  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.

    • NEXT_PUBLIC_DEFAULT_SITE_NAME - the name of the site.

    • Add other environment variables (SITECORE_EDGE_URL, NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID, SITECORE_EDITING_SECRET) including 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,