From 4274d680e189049f5d5865a7f720ec716b54b224 Mon Sep 17 00:00:00 2001
From: Tim Leikauf <tim.leikauf@googlemail.com>
Date: Wed, 1 Jul 2026 21:50:43 +0200
Subject: [PATCH] =?UTF-8?q?Rework=20PostHog=20setup=20=E2=80=94=20use=20Ne?=
 =?UTF-8?q?xt.js=20ingest=20proxy=20+=20posthog-js/react?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mirrors the proven pattern from gendersloty: rewrites /ingest/* to
the PostHog host so requests go through the same origin (no CORS,
no ad-blocker issues). Uses PostHogProvider and usePostHog from
posthog-js/react official React integration.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/layout.tsx                 |  5 +++++
 components/PostHogPageView.tsx | 22 ++++++++++++++++++++++
 components/PostHogProvider.tsx | 16 +++++-----------
 lib/posthog.ts                 |  1 +
 next.config.mjs                | 22 ++++++++++++++++++++--
 5 files changed, 53 insertions(+), 13 deletions(-)
 create mode 100644 components/PostHogPageView.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index c457b32..e46f0bb 100755
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,6 +4,8 @@ import './globals.css'
 import Nav from '@/components/ui/Nav'
 import Footer from '@/components/ui/Footer'
 import PostHogProvider from '@/components/PostHogProvider'
+import { PostHogPageView } from '@/components/PostHogPageView'
+import { Suspense } from 'react'
 
 const cormorant = Cormorant_Garamond({
   subsets: ['latin'],
@@ -47,6 +49,9 @@ export default function RootLayout({
           }}
         />
         <PostHogProvider>
+          <Suspense fallback={null}>
+            <PostHogPageView />
+          </Suspense>
           <Nav />
           <main>{children}</main>
           <Footer />
diff --git a/components/PostHogPageView.tsx b/components/PostHogPageView.tsx
new file mode 100644
index 0000000..02913c3
--- /dev/null
+++ b/components/PostHogPageView.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+import { usePostHog } from 'posthog-js/react'
+import { useEffect } from 'react'
+
+export function PostHogPageView() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const posthog = usePostHog()
+
+  useEffect(() => {
+    if (pathname && posthog) {
+      let url = window.origin + pathname
+      const search = searchParams.toString()
+      if (search) url += `?${search}`
+      posthog.capture('$pageview', { $current_url: url })
+    }
+  }, [pathname, searchParams, posthog])
+
+  return null
+}
diff --git a/components/PostHogProvider.tsx b/components/PostHogProvider.tsx
index dc83050..bdbba9b 100644
--- a/components/PostHogProvider.tsx
+++ b/components/PostHogProvider.tsx
@@ -1,24 +1,18 @@
 'use client'
 
-import { useEffect } from 'react'
-import { usePathname } from 'next/navigation'
 import posthog from 'posthog-js'
+import { PostHogProvider as PHProvider } from 'posthog-js/react'
+import { useEffect } from 'react'
 
 export default function PostHogProvider({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     posthog.init('phc_BHgg9S7CQqVShe7EMCdi86PxA49qcNaTsR9Nn5EGxRCT', {
-      api_host: 'https://eu.posthog.com',
+      api_host: '/ingest',
+      ui_host: 'https://analytics.hyggecraftery.com',
       capture_pageview: false,
       persistence: 'memory',
     })
   }, [])
 
-  const pathname = usePathname()
-
-  useEffect(() => {
-    // PostHog queues events automatically before init completes
-    posthog.capture('$pageview', { $current_url: window.location.href })
-  }, [pathname])
-
-  return <>{children}</>
+  return <PHProvider client={posthog}>{children}</PHProvider>
 }
diff --git a/lib/posthog.ts b/lib/posthog.ts
index 794536a..1674e68 100644
--- a/lib/posthog.ts
+++ b/lib/posthog.ts
@@ -1,2 +1,3 @@
 import posthog from 'posthog-js'
 export { posthog }
+export { usePostHog } from 'posthog-js/react'
diff --git a/next.config.mjs b/next.config.mjs
index 4678774..6dc38ca 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,22 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  async rewrites() {
+    return [
+      {
+        source: '/ingest/static/:path*',
+        destination: 'https://analytics.hyggecraftery.com/static/:path*',
+      },
+      {
+        source: '/ingest/:path*',
+        destination: 'https://analytics.hyggecraftery.com/:path*',
+      },
+      {
+        source: '/ingest/decide',
+        destination: 'https://analytics.hyggecraftery.com/decide',
+      },
+    ]
+  },
+  skipTrailingSlashRedirect: true,
+}
 
-export default nextConfig;
+export default nextConfig