Override default protocols using the EditingRenderMiddleware in Next.js JSS apps

Version: 22.x

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:
RequestResponse
```
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.

Do you have some feedback for us?

If you have suggestions for improving this article,