Reverse proxy ghost in next.js app deployed on Vercel

I want to reverse proxy my ghost blogs into a next app hosted on vercel,

I tried adding this in next.config.js but it redirects me to https://error.ghost.org/

/** @type {import('next').NextConfig} */
const nextConfig = {
  trailingSlash: true,
  async rewrites() {
    return [     
      {
        source: "/blog/:path*/",
        destination: "https://<subdomain>.ghost.io/blog/:path*/",
      },
      {
        source: "/blog/:path*",
        destination: "https://<subdomain>.ghost.io/blog/:path*",
      }    
    ];
  },
  async headers() {
    return [
      {
        source: "/blog/:path*",
        headers: [{ key: "x-forwarded-host", value: "your-custom-domain.com" }],
      }
    ];
  }
}

module.exports = nextConfig

can someone help me to create reverse proxy for this in detail?

For questions about detailed Next.js syntax, I recommend trying the Next.js discussion forum: