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 Rewrite to vercel.json Configuration
In your vercel.json
config, add this rewrite rule under "rewrites":
{
"source": "/experts/:path*",
"destination": "/api/partnerpage"
}
This tells Vercel to forward all /experts/... requests to an internal API route handler.
2. Create API Route Handler to Forward the Request
Create a file in your project called pages/api/partnerpage.ts
and add the following code
import type { NextApiRequest, NextApiResponse } from 'next';
const PARTNERPAGE_BASE_URL = 'https://<YOUR-PARTNERPAGE-SUBDOMAIN>.directory.sites.partnerpage.io';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try {
const originalUrl = req.url || '/experts';
const urlObj = new URL(`https://dummy${originalUrl}`);
const targetPath = urlObj.pathname.replace(/^\/api\/partnerpage/, '') || '/';
const targetQuery = urlObj.search;
const targetUrl = `${PARTNERPAGE_BASE_URL}${targetPath}${targetQuery}`;
const headers: Record<string, string> = {
'User-Agent': req.headers['user-agent'] || '',
Accept: req.headers.accept || '*/*',
'Accept-Language': req.headers['accept-language'] || '',
'Accept-Encoding': req.headers['accept-encoding'] || ''
};
const clientIP = (req.headers['x-forwarded-for'] as string)?.split(',')[0]?.trim() || '';
headers['X-Forwarded-For'] = clientIP;
headers['X-Real-IP'] = clientIP;
headers['PartnerPage-Reverse-Proxy'] = 'true';
const upstreamResponse = await fetch(targetUrl, {
method: req.method,
headers,
body: req.method !== 'GET' && req.method !== 'HEAD' ? JSON.stringify(req.body) : undefined
});
upstreamResponse.headers.forEach((value, key) => {
res.setHeader(key, value);
});
res.status(upstreamResponse.status);
const buffer = await upstreamResponse.arrayBuffer();
res.send(Buffer.from(buffer));
} catch (err) {
console.error('Proxy error:', err);
res.status(500).json({ error: 'PartnerPage proxy failed' });
}
}
Make sure to replace <YOUR-PARTNERPAGE-SUBDOMAIN> with your actual PartnerPage directory domain (you can find this in your PartnerPage admin panel or onboarding instructions).
3. Review your configuration
To successfully set up a reverse proxy to PartnerPage using Vercel, make sure you have:
✅ Configuration file (vercel.json) that:
Rewrites requests from
/experts/...
to the API route handler inpages/api/partnerpage.ts
✅ API Route Handler (pages/api/partnerpage.ts) that:
Receives and decodes the full path
Forwards the request to your PartnerPage directory with the correct URL
Passes along all required headers and response content, including the PartnerPage required headers of:
PartnerPage-Client-IP
: the user’s IP addressPartnerPage-Reverse-Proxy
: a static value of "true"
With these two components, 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 API route handler 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 API route handler 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: