---
title: "Walkthrough: Deploying JSS Next.js apps to Vercel"
slug: "walkthrough--deploying-jss-next-js-apps-to-vercel"
abstract: "Deploy a JSS Next.js app to Vercel and configure webhooks for automatic redeployments."
---
# Walkthrough: Deploying JSS Next.js apps to Vercel

Vercel is an all-in-one platform with global content delivery networks (CDNs) supporting the deployment and delivery of static and [Jamstack](https://jamstack.org/) apps. Vercel has first-class support for Next.js.

This walkthrough demonstrates deploying the JSS Next.js app to Vercel and configuring the necessary webhooks so that the application redeploys automatically when published Sitecore data changes.

This walkthrough describes how to:

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

## Deploy a Next.js JSS app to Vercel

Before deploying the Next.js JSS app, watch the following video to see the deployment process:

:::youtube{id="s_F5hoNsvOo"}

Before continuing, you must have a Next.js JSS app set up and [connected to a Sitecore instance](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/walkthrough--connecting-a-code-first-jss-next-js-application-to-sitecore.html "Walkthrough: Connecting a code-first JSS Next.js application to Sitecore").

To deploy your app to production:

1. Perform the steps provided in the Next.js guide for [getting started](https://nextjs.org/docs/deployment#getting-started) with deployment.
2. Add [environment variables](https://nextjs.org/docs/basic-features/environment-variables#environment-variables-on-vercel) to Vercel or modify the `.env` file in the root folder of your JSS Next.js app:

    > [!note]
    > We recommend setting the environment variables in Vercel.

    - `PUBLIC_URL` - your Vercel deployment URL.
    - `SITECORE_SITE_NAME` (for JSS 21.6.0 and later) or `JSS_APP_NAME` (for older JSS versions) - the value of the Sitecore site name. It overrides the value set in the `package.json` file for the `config.appName` property, which does not always contain your site name. Provide this variable if the deployment is used to render a single site.
    - `SITECORE_API_KEY` - your Sitecore API key. For Sitecore XM, the `SITECORE_API_KEY` is your [Sitecore SSC API key](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/create-a-sitecore-services-client-api-key.html "Create a Sitecore services client API key") or, if using Sitecore Edge Delivery, the [Sitecore Experience Edge API key](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/create-the-api-key.html "Create the API key").
    - `SITECORE_API_HOST` - your Sitecore API hostname.

        > [!note]
        > The `SITECORE_API_HOST` is not required for Sitecore Experience Edge.

    - `JSS_EDITING_SECRET` - your secret token. The `JSS_EDITING_SECRET` is optional for deployments but necessary to [use a Sitecore editor with your JSS Next.js app](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/walkthrough--connecting-a-next-js-jss-app-to-sitecore-editors.html "Walkthrough: Connecting a Next.js JSS app to Sitecore editors") deployed on Vercel.
    - `GRAPH_QL_ENDPOINT` - your GraphQL endpoint. The `GRAPH_QL_ENDPOINT` is required for Sitecore Experience Edge. For Sitecore XM, this is typically optional. By default, the endpoint is calculated using the resolved Sitecore API hostname and the `config.graphQLEndpointPath` option defined in your `package.json` file.
3. Push the changes to your Git provider.

## Configure webhooks to redeploy the app with updated content

You can use webhooks to trigger automatic redeployments of your JSS Next.js app. When using Sitecore Experience Edge for XM, you can configure webhooks that redeploy the JSS app when new data reaches the Edge Delivery Platform. Alternatively, you can enable Sitecore webhooks that trigger when the publishing process in your Sitecore instance finalizes.

### Use Webhooks with Sitecore Experience Edge for XM

When using Experience Edge for XM, you can trigger static site generation, cache clearing, and other automated activities when your data reaches the Edge Delivery Platform.

You register, update, remove, or list webhooks using the [Experience Edge Admin API](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/admin-api.html "Admin API").

> [!note]
> Before using the Admin API for any operations, you must [obtain an authentication token](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/request-a-jwt-for-experience-edge-xm-using-oauth.html "Request a JWT for Experience Edge XM using OAuth").

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

1. [Create a deploy hook](https://vercel.com/docs/more/deploy-hooks#creating-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:

    ```csharp
    {
        "label": "My new webhook",
        "createdBy": "SOME_USER_ID",
        "uri": "YOUR_VERCEL_WEBHOOK_URL",
        "method": "GET"
    }
    ```

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.

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

### Enable the Sitecore XM publish:end webhook

Using the Sitecore XM `publish:end` webhook, you can automatically trigger static site generation, cache clearing, and other automated activities when the publishing process finalizes in Sitecore.

To enable the `Publish:end` hook:

1. [Create a deploy hook](https://vercel.com/docs/more/deploy-hooks#creating-a-deploy-hook) in Vercel and copy the URL of the webhook.
2. Create a webhook configuration based on the example `/App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.AppServices.PublishingWebHook.config.example`, and include it in your solution:
    - Set the required `url` option to the URL of the Vercel deploy hook.
    - Define the `method` option with a value of `POST` or `GET`. This optional configuration specifies the HTTP method for invoking the webhook.
    - Define the `site` for which to trigger the webhook when publishing finalizes. By default, Sitecore triggers the webhook for every published item. If you provide the `site` parameter, the webhook is invoked if the published item root is an ancestor, descendant, or equal to the configured site's root item.
3. Deploy the webhook configuration to your Sitecore instance.
4. Publish your items.
5. On Vercel, check that the end of the publishing process triggered a new deployment.