Adding a PostHog Provider

ThomasCode92 · ThomasCode92 · commit 4451770cef6e · 2025-07-16T08:32:45.000+02:00
diff --git a/src/app/_providers/posthog-provider.tsx b/src/app/_providers/posthog-provider.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { useEffect } from "react";
+import posthog from "posthog-js";
+import { PostHogProvider as PHProvider } from "posthog-js/react";
+
+import { env } from "~/env";
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
+      api_host: env.NEXT_PUBLIC_POSTHOG_HOST,
+      person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
+      defaults: "2025-05-24",
+    });
+  }, []);
+
+  return <PHProvider client={posthog}>{children}</PHProvider>;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,9 +1,11 @@
-import "~/styles/globals.css";
-
 import { ClerkProvider } from "@clerk/nextjs";
 import { type Metadata } from "next";
 import { Geist } from "next/font/google";
 
+import { PostHogProvider } from "./_providers/posthog-provider";
+
+import "~/styles/globals.css";
+
 export const metadata: Metadata = {
   title: "Drive Tutorial",
   description: "It's like Google Drive, but worse!",
@@ -20,9 +22,11 @@ export default function RootLayout({
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <ClerkProvider>
-      <html lang="en" className={`${geist.variable}`}>
-        <body>{children}</body>
-      </html>
+      <PostHogProvider>
+        <html lang="en" className={`${geist.variable}`}>
+          <body>{children}</body>
+        </html>
+      </PostHogProvider>
     </ClerkProvider>
   );
 }
