---
title: "Override default protocols using the EditingRenderMiddleware in Next.js JSS apps"
slug: "override-default-protocols-using-the-editingrendermiddleware-in-next-js-jss-apps"
abstract: "Fix protocol mismatch issues when deploying the application on platforms other than Vercel"
---
# Override default protocols using the EditingRenderMiddleware in Next.js JSS apps

If you host your Next.js JSS application on a platform other than Vercel, the out-of-the-box integration with editors such as Pages won't work due to a protocol mismatch.

By default, the Next.js JSS application sets the protocol for HTTP request URLs to `http` or `https` based on the value of the environment variable `VERCEL`. If the value of the variable is `true`, the application sets the protocol for the requests to `https`. When hosting the application on a different platform, this variable does not have a `true` value and the application uses the `http` protocol.

> [!important]
> The default protocol resolution accounts for SitecoreAI, Vercel, and Netlify deployments. If you're deploying to another platform, you need to override the default resolution logic.

Because the application can not determine the correct protocol across all possible environments/configuration/platforms, the Next.js SDK allows you to override the default protocols using the `resolveServerUrl` property in the configuration of the editing rendering middleware.

To override the default protocol settings:

- In the `src/pages/api/editing/render.ts` file, replace the existing options for the editing rendering `handler`:

    ```csharp
    const handler = new EditingRenderMiddleware({
      resolveServerUrl: (req: NextApiRequest) => {
        return `${ process.env.PROD ? 'https' : 'http'}://${req.headers.host}`;
      },
    }).getHandler();
    ```

    In this example, the handler uses the `PROD` environment variable to switch between `https` and `http`. To use `https`, ensure the `PROD` environment variable exists and is set to `true`.