Setting Up a Reverse Proxy

Author: ThomasCode92

next.config.js

@@ -8,6 +8,24 @@ import "./src/env.js";
 const config = {
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
+
+  async rewrites() {
+    return [
+      {
+        source: "/relay-BxMI/static/:path*",
+        destination: "https://us-assets.i.posthog.com/static/:path*",
+      },
+      {
+        source: "/relay-BxMI/:path*",
+        destination: "https://us.i.posthog.com/:path*",
+      },
+      {
+        source: "/relay-BxMI/flags",
+        destination: "https://us.i.posthog.com/flags",
+      },
+    ];
+  },
+  skipTrailingSlashRedirect: true, // This is required to support PostHog trailing slash API requests
 };
 
 export default config;

src/app/_providers/posthog-provider.tsx

@@ -9,7 +9,8 @@ import { env } from "~/env";
 export function PostHogProvider({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
-      api_host: env.NEXT_PUBLIC_POSTHOG_HOST,
+      api_host: "/relay-BxMI",
+      ui_host: env.NEXT_PUBLIC_POSTHOG_HOST,
       person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
       defaults: "2025-05-24",
     });