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

When hosting your Next.js JSS application on a platform other than Vercel, the integration with Experience Editor or Pages 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/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:

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