---
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

When hosting your Next.js JSS application on a platform other than Vercel, the integration with Experience Editor stops working because of a protocol mismatch error.

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.

Because the application can not determine the correct protocol across all possible environments/configurations/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`. For example:

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