---
title: "Use the Vercel Deployment Protection feature with JSS apps"
slug: "use-the-vercel-deployment-protection-feature-with-jss-apps"
abstract: "Learn how to use Deployment Protection on the Vercel cloud platform for your Next.js JSS app."
---
# Use the Vercel Deployment Protection feature with JSS apps

[Deployment Protection](https://vercel.com/docs/concepts/deployments/deployment-protection) is a feature of the Vercel cloud platform that allows developers and editors to limit access to their site deployments.

This topic describes how to use Deployment Protection depending on your version of JSS:

- [Use Deployment Protection with JSS versions from 21.2 to 21.5](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/use-the-vercel-deployment-protection-feature-with-jss-apps.html#UUID-307803d3-da5e-28bb-4c3c-e44a808128f9_section-idm1853431929867984 "Use Deployment Protection with JSS versions from 21.2 to 21.5")
- [Use Deployment Protection with JSS versions 21.6 or 21.7](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/use-the-vercel-deployment-protection-feature-with-jss-apps.html#UUID-307803d3-da5e-28bb-4c3c-e44a808128f9_section-idm4582143676908834319294171914 "Use Deployment Protection with JSS versions 21.6 or 21.7")

## Use Deployment Protection with JSS versions from 21.2 to 21.5

To use Deployment Protection with versions of JSS from 21.2 to 21.5:

1. Create a new file in the `src/temp` folder, for example, `get-public-url.js`, with the following content:

    ```javascript
    const { getPublicUrl: defaultGetPublicUrl } = require('@sitecore-jss/sitecore-jss-nextjs');

    const getPublicUrl = () => {
      return process.env.NODE_ENV !== 'production' ? defaultGetPublicUrl() : '';

    }

    module.exports = getPublicUrl;
    ```

    > [!note]
    > When using JSS SDK 21.2 or later, import/require the `getPublicUrl` funtion from `@sitecore-jss/sitecore-jss-nextjs/utils` instead of `@sitecore-jss/sitecore-jss-nextjs` (deprecated).

2. For every component and file in your app that uses static asset links, replace the import of `getPublicUrl` with the import from `./temp/get-public-url.js`. For example, if you use [foundation-head](https://github.com/sitecorelabs/xmcloud-foundation-head), replace the existing import/require statements as follows:
    - In the `next.config.js` file: `const getPublicUrl = require('./src/temp/get-public-url');`
    - In the `src/Layout.tsx` file: `import getPublicUrl from 'temp/get-public-url';`
    - In the `src/Navigation.tsx` file: `import getPublicUrl from 'temp/get-public-url';`

    > [!note]
    > You do not need to change the import statement in the `sitemap.ts` file.

3. Replace the import/require statement of `getPublicUrl` with the import from `./temp/get-public-url.js` in any other file or component where you use static asset URLs.

You can modify the local `getPublicUrl` implementation according to your needs. The main purpose of the function is to transform absolute links to relative URLs in Vercel deployments.

> [!important]
> Vercel Deployment Protection does not work with editing mode. If you require the Experience Editor or Pages to function in your site configuration, use either the default XM Cloud editing host, your own editing host, or a Vercel deployment that is not deployment-protected.
>
> If you use the [Protection Bypass token](https://vercel.com/docs/concepts/deployments/deployment-protection#using-protection-bypass-for-automation) to access the site in normal mode, you must use both the `x-vercel-protection-bypass` and `x-vercel-set-bypass-cookie` headers (or query string parameters) to properly render all the static assets.

## Use Deployment Protection with JSS versions 21.6 or 21.7

To use Deployment Protection with JSS versions 21.6 or 21.7:

1. In your app's `scripts\config\plugins\fallback.ts` file, modify how `publicUrl` is set. For example:

    ```ts
    const publicUrlFallback = (process.env.NODE_ENV !== 'production' ? getPublicUrl() : '');
    return Object.assign({}, config, {
      publicUrl: config.publicUrl || publicUrlFallback,
    });
    ```

    > [!important]
    > If you're using one of your Deployment Protection enabled Vercel URLs as your rendering host endpoint for editing, you must complete the remaining steps in this procedure to enable Sitecore’s editing tools to use your Vercel deployment with Protection Bypass. Otherwise, no further changes are needed.

2. Configure the [Protection Bypass token](https://vercel.com/docs/concepts/deployments/deployment-protection#using-protection-bypass-for-automation) in Vercel.
3. Add the bypass token to your rendering host settings, depending on whether you use SXA or local file edits to configure your site settings:

    SXA site settings

    1. In SXA, open your rendering host definition located in `/sitecore/system/Settings/Services/Rendering Hosts/`. For example, if your definition is named `vercel`, open `/sitecore/system/Settings/Services/Rendering Hosts/vercel`.
    2. Add the query string parameter `x-vercel-protection-bypass=<bypass_token>` to the URLs in the following fields, making sure to include the bypass token value from Vercel:
        - `Server side rendering engine endpoint URL`
        - `Server side rendering engine application URL`
        - `Server side rendering engine configuration URL`

        The following example represents an updated URL for `Server side rendering engine application URL`:

        ```http
        https://<vercel_deployment_url>/?x-vercel-protection-bypass=<bypass_token>
        ```

    Config file site settings

    Open the config file for your app and, in the `<app>` node for your application, add the query string parameter `x-vercel-protection-bypass=<bypass_token>` to the values of the following attributes, making sure to include the bypass token value from Vercel:

    - `serverSideRenderingEngineEndpointUrl`
    - `serverSideRenderingEngineApplicationUrl`

    The following example represents an updated URL for `serverSideRenderingEngineApplicationUrl`:

    ```http
    https://<vercel_deployment_url>/?x-vercel-protection-bypass=<bypass_token>
    ```

4. If Vercel Deployment Protection is enabled for a deployment URL other than the [automatically-generated one](https://vercel.com/docs/deployments/generated-urls), and you are using this other URL as your rendering host endpoint, do the following in Vercel:
    1. Add the `PUBLIC_URL` environment variable.
    2. Set the new variable's value to the protocol and hostname used by your rendering host settings, such as `https://<vercel_deployment_url>`.

> [!important]
> If you use the Protection Bypass token to access the site in normal mode, you must use both the `x-vercel-protection-bypass` and `x-vercel-set-bypass-cookie` [headers](https://vercel.com/docs/security/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation#using-protection-bypass-for-automation), or use query string parameters, to properly render all the static assets.