Integrate custom proxy

Version:

Integrating a custom proxy implementation in Content SDK involves extending the Proxy abstract class and passing the middleware instance as a parameter to defineProxy.

To integrate custom proxy:

Create a custom proxy class by extending Proxy (or ProxyBase if you want to inherit the default Sitecore methods).
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 { defineProxy, ProxyBase } from '@sitecore-content-sdk/nextjs/proxy';
import { NextRequest, NextFetchEvent } from 'next/server';

...

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

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!