feat: fix posthog (#155)

hooks/usePostHog.tsx

@@ -0,0 +1,33 @@
+import { useRouter } from 'next/router';
+import posthog from 'posthog-js';
+import { useEffect } from 'react';
+
+if (typeof window !== 'undefined') {
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY ?? '', {
+        api_host:
+            process.env.NEXT_PUBLIC_POSTHOG_HOST ||
+            'https://docs.posthog.archifiltre.fr',
+        capture_pageview: false,
+    });
+}
+
+export const usePostHog = () => {
+    const router = useRouter();
+
+    useEffect(() => {
+        const handleRouteChange = () => {
+            posthog?.capture('$pageview');
+            console.log('capture');
+        };
+        router.events.on('routeChangeComplete', handleRouteChange);
+
+        return () => {
+            router.events.off('routeChangeComplete', handleRouteChange);
+        };
+    }, []);
+};
+
+export const PostHogTracker = () => {
+    usePostHog();
+    return <></>;
+};

pages/_app.tsx

@@ -2,45 +2,21 @@ import { PrismicPreview } from '@prismicio/next';
 import { PrismicProvider } from '@prismicio/react';
 import type { AppProps } from 'next/app';
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { DefaultSeo } from 'next-seo';
-import posthog from 'posthog-js';
 import { PostHogProvider } from 'posthog-js/react';
-import { useEffect } from 'react';
 import { Footer } from '../components/common/Footer';
 import { Header } from '../components/common/Header';
 import { Layout } from '../components/common/Layout';
 import { Main } from '../components/common/Main';
+import { PostHogTracker } from '../hooks/usePostHog';
 import { repositoryName } from '../prismicConfiguration';
 import '../styles/index.scss';
 import { linkResolver } from '../utils/prismic/helpers';
 
-if (typeof window !== 'undefined') {
-    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY ?? '', {
-        api_host:
-            process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com',
-        // Enable debug mode in development
-        loaded: posthog => {
-            if (process.env.NODE_ENV === 'development') posthog.debug();
-        },
-        capture_pageview: false, // Disable automatic pageview capture, as we capture manually
-    });
-}
-
 const App = ({ Component, pageProps }: AppProps) => {
-    const router = useRouter();
-
-    useEffect(() => {
-        // Track page views
-        const handleRouteChange = () => posthog?.capture('$pageview');
-        router.events.on('routeChangeComplete', handleRouteChange);
-
-        return () => {
-            router.events.off('routeChangeComplete', handleRouteChange);
-        };
-    }, []);
     return (
         <PostHogProvider>
+            <PostHogTracker />
             <PrismicProvider
                 linkResolver={linkResolver}
                 internalLinkComponent={({ href, children, ...props }) => (