---
title: "Use the Vercel Deployment Protection feature with JSS apps"
slug: "use-the-vercel-deployment-protection-feature-with-jss-apps"
abstract: "Learn how to leverage 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. 

To use Deployment Protection with JSS apps:

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 Experience Editor or Pages to function in your site configuration, use either the default SitecoreAI 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](https://vercel.com/docs/security/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation#using-protection-bypass-for-automation) (or query string parameters) to properly render all the static assets.