@foomo/next-proxy-middleware

A Next.js middleware for proxying requests to external services with advanced configuration options.

Installation

npm install @foomo/next-proxy-middleware

Usage

Import the middleware and configuration type in your Next.js middleware file:

import {
  createProxyMiddleware,
  DevProxyConfig,
} from "@foomo/next-proxy-middleware";

Configuration

The DevProxyConfig type defines the following options:

export type DevProxyConfig = {
  debug?: boolean; // Enable debug logging
  disable?: boolean; // Disable the proxy entirely
  remoteUrl: string | ((request: NextRequest) => string); // Remote URL or function to generate it
  overrideCookieDomain?: false | string; // Domain to use for cookies or false to disable
  basicAuth?: {
    authHeader: string; // Authorization header value
  };
  cfTokenAuth?: {
    clientId: string;
    clientSecret: string;
  };
  rewriteRequestHeaders?: (
    originalRequest: Headers,
    preparedHeaders: Headers
  ) => Headers;
  rewriteResponseHeaders?: (
    backendResponse: Headers,
    preparedHeaders: Headers
  ) => Headers;
};

Example

Here's an example of how to use the middleware in your middleware.ts file:

import {
  createProxyMiddleware,
  DevProxyConfig,
} from "@foomo/next-proxy-middleware";

const proxyConfig: DevProxyConfig = {
  remoteUrl: "https://api.example.com",
  basicAuth: {
    authHeader: "Basic abc123==",
  },
  overrideCookieDomain: "localhost",
};

const proxyMiddleware = createProxyMiddleware(proxyConfig);

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.match("^/(api|webhooks)/")) {
    return proxyMiddleware(request);
  }
  return request;
}

export const config = {
  matcher: ["/api/:path*"],
};

Header Customization

You can customize request and response headers using the rewriteRequestHeaders and rewriteResponseHeaders hooks:

const proxyConfig: DevProxyConfig = {
  remoteUrl: "https://api.example.com",
  overrideCookieDomain: "localhost",

  // Modify headers before sending to backend
  rewriteRequestHeaders: (originalRequest, preparedHeaders) => {
    preparedHeaders.set("X-Custom-Header", "value");
    return preparedHeaders;
  },

  // Modify headers before sending to client
  rewriteResponseHeaders: (backendResponse, preparedHeaders) => {
    preparedHeaders.set("Access-Control-Allow-Origin", "http://localhost:3000");
    return preparedHeaders;
  },
};

Contributing

Contributions are welcome! Please fork the repository and submit a pull request.

License

Distributed under MIT License, please see license file within the code for more details.

Made with love by foomo at bestbytes