You can proxy traffic from your domain (e.g. yourdomain.com/experts) to your PartnerPage-hosted directory using Vercel’s middleware and API routes. This is useful for keeping visitors on your domain while still displaying PartnerPage-powered content.
This guide shows you how to forward requests to your PartnerPage directory while preserving the full path and passing required headers.
✅ Requirements
Your site is hosted on Vercel (Next.js 13+)
You want to proxy a path like
/experts/...
to your PartnerPage directoryYour know your PartnerPage base URL (e.g.
https://<your-id>.directory.sites.partnerpage.io
or<yourcompany>.partnerpage.io
)
1. Add or Modify your middleware.ts file
In your middleware.ts
file, add the code below. This code grabs the incoming request and sends it to the upstream PartnerPage serve including all the required path segments, query parameters, and headers.
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
const PARTNERPAGE_BASE_URL = 'https://<your directory id>.directory.sites.partnerpage.io'
export function middleware(request: NextRequest) {
const { pathname, search } = request.nextUrl
// This part intercepts request to the path and subpath of your directory, e.g. /experts
if (!pathname.startsWith('/experts')) {
return NextResponse.next()
}
const fullUrl = `${request.nextUrl.origin}${pathname}${search}`
// Add custom headers required by PartnerPage
const clientIP = request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() ??
request.ip ??
''
const requestHeaders = new Headers(request.headers)
requestHeaders.set('X-Forwarded-For', clientIP)
requestHeaders.set('X-Real-IP', clientIP)
requestHeaders.set('PartnerPage-Reverse-Proxy', 'true')
requestHeaders.set('Cache-Control', 'no-store, no-cache, must-revalidate')
// Rewrite to PartnerPage, preserving path and query string
const upstreamUrl = `${PARTNERPAGE_BASE_URL}${pathname}${search}`
return NextResponse.rewrite(new URL(upstreamUrl), {
request: { headers: requestHeaders },
})
}
export const config = {
matcher: ['/experts/:path*'],
}
Be sure to update the base URL and all the /expert
path references if you are using a different path like /partners, /consultants
, etc.
2. Review your configuration
To successfully set up a reverse proxy to PartnerPage using Vercel, make sure you have:
✅ Middleware file (middleware.ts) that:
Rewrites requests from
/experts/...
to the appropriate upstream location on the PartnerPage serverReceives and decodes the full path
Forwards the request to your PartnerPage directory with the correct URL with all path segments and query params
Passes along all the PartnerPage required headers of:
PartnerPage-Client-IP
: the user’s IP addressPartnerPage-Reverse-Proxy
: a static value of "true"
With this one file, your site will correctly serve PartnerPage content through your domain while preserving all routing, filtering, and query parameters.
Troubleshooting
Troubleshooting
I'm getting an error in the browser that says "Too many redirects". What's wrong?
I'm getting an error in the browser that says "Too many redirects". What's wrong?
If you're seeing this error, it likely means that you have an infinite redirect loop somewhere in your configuration. This can commonly happen if your Vercel configuration has a domain level redirect in the DNS settings.
My page is loading with the branding, but it is displaying a 404 error and my URL doesn't have my path like /experts. Why?
My page is loading with the branding, but it is displaying a 404 error and my URL doesn't have my path like /experts. Why?
This means that your middleware is stripping the path and redirecting to the root domain. The upstream PartnerPage server expects the entire path, which is why the 404 is displayed. Be sure that your middleware.ts file is forwarding the entire path, including anything you have like yourdomain.com/experts and not just yourdomain.com.
Still need help? Reach out to PartnerPage support anytime.
Resources: