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

Current version: 19.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 Horizon 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.

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. For example:

RequestResponse

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

Do you have some feedback for us?

If you have suggestions for improving this article,