chore: update posthog behavior

src/pages/_app.tsx

@@ -2,13 +2,14 @@ import '@/styles/globals.css';
 import '@/styles/nprogess.css';
 import type { AppProps } from 'next/app';
 import { ThemeProvider } from 'next-themes';
-import Router from 'next/router';
+import Router, { useRouter } from 'next/router';
 
 import nProgress from 'nprogress';
 import { PostHogProvider } from 'posthog-js/react';
 import posthog from 'posthog-js';
 import { isProd } from '@/constants/env';
 import { LazyMotion } from 'framer-motion';
+import React from 'react';
 Router.events.on('routeChangeStart', nProgress.start);
 Router.events.on('routeChangeError', nProgress.remove);
 Router.events.on('routeChangeComplete', nProgress.done);
@@ -21,6 +22,18 @@ if (typeof window !== 'undefined' && isProd) {
 const loadFeatures = () => import('@/lib/features').then(res => res.default);
 
 export default function App({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
+  React.useEffect(() => {
+    // Track page views
+    const handleRouteChange = () => posthog?.capture('$pageview');
+    router.events.on('routeChangeComplete', handleRouteChange);
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, []);
+
   return (
     <PostHogProvider client={posthog}>
       <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>