الهدف
بعد هالدرس تقدر تنصّب PostHog في Next.js بشكل صح — client + server SDK، reverse proxy شغّال، وأول $pageview event يوصل لـ dashboard بدون ما ad-blocker يوقفه.
ليش هذا الحين؟
كل مرة تبدأ مشروع وتقول "بسوّي الـ analytics بعدين" — تخسر data من أول يوم. المشكلة مو بس التأجيل، المشكلة إنك لو نصّبت PostHog غلط (direct to posthog.com بدون proxy)، أكثر من 40% من events مستخدميك تنحجب من ad-blockers. تبني product على بيانات ناقصة = قرارات غلط.
PostHog هو الـ all-in-one analytics stack اللي يغني عن Mixpanel + Hotjar + LaunchDarkly + FullStory — بسعر مناسب و data عندك مو عند غيرك.
الفكرة
PostHog يشتغل بطريقتين: client-side بـ posthog-js (browser)، وserver-side بـ posthog-node (API routes, server components). الاثنين لازم يشتغلون.
المشكلة الكبيرة: لو دزيت events مباشرة لـ https://us.i.posthog.com، الـ browser يشوف الـ hostname ويحجبه. الحل هو reverse proxy — events تمشي من دومين موقعك (/ingest/*) و Next.js يحوّلها لـ PostHog. الـ ad-blocker ما يعرف الفرق.
الـ initialization لازم يصير مرة وحدة في app/providers.tsx. كل ما تسوّي posthog.init() أكثر من مرة، تطلع لك duplicate events وبيانات مكسورة.