Integrate PostHog analytics 🦔

app/providers.tsx

@@ -2,6 +2,8 @@
 
 import PlausibleProvider from 'next-plausible';
 import { ThemeProvider } from 'next-themes';
+import posthog from 'posthog-js';
+import { PostHogProvider } from 'posthog-js/react';
 import { type FC, type ReactNode } from 'react';
 import { SWRConfig } from 'swr';
 
@@ -30,6 +32,14 @@ const CustomizedPlausibleProvider: FC<CustomizedPlausibleProviderProps> = ({
   );
 };
 
+if (typeof window !== 'undefined' && env.NEXT_PUBLIC_POSTHOG_KEY) {
+  posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: '/ingest',
+    ui_host: 'https://eu.posthog.com',
+    person_profiles: 'always',
+  });
+}
+
 const swrFetcher = async (url: string) => {
   const response = await fetch(url);
   if (!response.ok) throw new Error(await response.text());
@@ -43,7 +53,9 @@ type ProvidersProps = {
 export const Providers: FC<ProvidersProps> = ({ children }) => (
   <ThemeProvider attribute="class">
     <SWRConfig value={{ fetcher: swrFetcher }}>
-      <CustomizedPlausibleProvider>{children}</CustomizedPlausibleProvider>
+      <CustomizedPlausibleProvider>
+        <PostHogProvider client={posthog}>{children}</PostHogProvider>
+      </CustomizedPlausibleProvider>
     </SWRConfig>
   </ThemeProvider>
 );

env.ts

@@ -53,10 +53,12 @@ export const env = createEnv({
   client: {
     NEXT_PUBLIC_PLAUSIBLE_DOMAIN: z.string().optional(),
     NEXT_PUBLIC_PLAUSIBLE_HOST: z.string().optional(),
+    NEXT_PUBLIC_POSTHOG_KEY: z.string().optional(),
   },
   experimental__runtimeEnv: {
     NEXT_PUBLIC_PLAUSIBLE_DOMAIN: process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN,
     NEXT_PUBLIC_PLAUSIBLE_HOST: process.env.NEXT_PUBLIC_PLAUSIBLE_HOST,
+    NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
   },
   emptyStringAsUndefined: true,
 });

lib/analytics.ts

@@ -1,4 +1,5 @@
 import { usePlausible } from 'next-plausible';
+import posthog from 'posthog-js';
 import { useCallback, useMemo } from 'react';
 
 type EmptyEvent = Record<string, never>;
@@ -27,6 +28,7 @@ export const useAnalytics = () => {
   const reportEvent = useCallback(
     <T extends keyof Events>(event: T, props: Events[T]) => {
       plausible(event, { props });
+      posthog.capture(event, props);
     },
     [plausible],
   );

next.config.js

@@ -44,6 +44,20 @@ const nextConfig = {
     ],
     formats: ['image/avif', 'image/webp'],
   },
+  rewrites: async () => [
+    {
+      source: '/ingest/static/:path*',
+      destination: 'https://eu-assets.i.posthog.com/static/:path*',
+    },
+    {
+      source: '/ingest/:path*',
+      destination: 'https://eu.i.posthog.com/:path*',
+    },
+    {
+      source: '/ingest/decide',
+      destination: 'https://eu.i.posthog.com/decide',
+    },
+  ],
   redirects: async () => [
     {
       source: '/lookup',

package.json

@@ -46,6 +46,7 @@
     "next-plausible": "^3.12.4",
     "next-themes": "^0.4.3",
     "postcss": "^8.4.49",
+    "posthog-js": "^1.202.2",
     "punycode": "^2.3.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",