Integrate custom proxy

Version:

To integrate a custom proxy in the Content SDK, extend the ProxyHandler class to create your own proxy implementation.

To integrate custom proxy:

Create a custom proxy class by extending the ProxyHandler class.

Note

If you need to inherit the default Sitecore methods, you can instead extend the ProxyBase class. In this case, your custom proxy must accept a ProxyBaseConfig argument in its constructor.
Implement the handle method to process requests.
Instantiate the proxy.
Pass the proxy instance to defineProxy in the Next.js proxy function definition.

Example integration

The following example demonstrates how to seamlessly integrate a simple custom proxy that logs a request URL:

import { ProxyHandler } from '@sitecore-content-sdk/nextjs/proxy';
import { NextRequest, NextResponse } from 'next/server';

...

class LoggerProxy extends ProxyHandler {
  async handle(req: NextRequest, res: NextResponse): Promise<NextResponse> {
   console.log(`[LOGGER] ${req.method} ${req.url}`);
   return res || NextResponse.next();
  }
}

In the proxy.ts file, instantiate the custom proxy and add it to the proxy chain:

export function proxy(req: NextRequest, event: NextFetchEvent) {

  ...
  const logger = new LoggerProxy();
  return defineProxy(logger, multisite, redirects, personalize).exec(req);
}

Note

There's no official method or helper to identify whether you're in the Editing mode inside your middleware. As a workaround, you can use the following Sitecore cookies to check whether you're in the Editing mode in your middleware:

sc_headless_mode
sitename#sc_mode

Next.js also provides the __next_preview_data and __prerender_bypass cookies to enable Preview Mode (Pages Router) or Draft Mode (App Router).

If you have suggestions for improving this article, let us know!