this repo has no description
www.baileykane.co/
Create app directory, with basic layout and posthog setup
+81
+37
app/PostHogPageView.tsx
+37
app/PostHogPageView.tsx
···
1
+
// app/PostHogPageView.tsx
2
+
"use client";
3
+
4
+
import { usePathname, useSearchParams } from "next/navigation";
5
+
import { useEffect, Suspense } from "react";
6
+
import { usePostHog } from "posthog-js/react";
7
+
8
+
function PostHogPageView(): null {
9
+
const pathname = usePathname();
10
+
const searchParams = useSearchParams();
11
+
const posthog = usePostHog();
12
+
13
+
// Track pageviews
14
+
useEffect(() => {
15
+
if (pathname && posthog) {
16
+
let url = window.origin + pathname;
17
+
if (searchParams.toString()) {
18
+
url = url + `?${searchParams.toString()}`;
19
+
}
20
+
21
+
posthog.capture("$pageview", { $current_url: url });
22
+
}
23
+
}, [pathname, searchParams, posthog]);
24
+
25
+
return null;
26
+
}
27
+
28
+
// Wrap this in Suspense to avoid the `useSearchParams` usage above
29
+
// from de-opting the whole app into client-side rendering
30
+
// See: https://nextjs.org/docs/messages/deopted-into-client-rendering
31
+
export default function SuspendedPostHogPageView() {
32
+
return (
33
+
<Suspense fallback={null}>
34
+
<PostHogPageView />
35
+
</Suspense>
36
+
);
37
+
}
+21
app/layout.tsx
+21
app/layout.tsx
···
1
+
import "@/styles/globals.css";
2
+
import { PostHogProvider } from "./providers";
3
+
import type { Metadata } from "next";
4
+
5
+
export const metadata: Metadata = {};
6
+
7
+
export default function RootLayout({
8
+
// Layouts must accept a children prop.
9
+
// This will be populated with nested layouts or pages
10
+
children,
11
+
}: {
12
+
children: React.ReactNode;
13
+
}) {
14
+
return (
15
+
<html lang="en">
16
+
<body>
17
+
<PostHogProvider>{children}</PostHogProvider>
18
+
</body>
19
+
</html>
20
+
);
21
+
}
+23
app/providers.tsx
+23
app/providers.tsx
···
1
+
"use client";
2
+
3
+
import posthog from "posthog-js";
4
+
import { PostHogProvider as PHProvider } from "posthog-js/react";
5
+
import { useEffect } from "react";
6
+
import PostHogPageView from "./PostHogPageView";
7
+
8
+
export function PostHogProvider({ children }: { children: React.ReactNode }) {
9
+
useEffect(() => {
10
+
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
11
+
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
12
+
capture_pageview: false,
13
+
capture_pageleave: true, // Enable pageleave capture
14
+
});
15
+
}, []);
16
+
17
+
return (
18
+
<PHProvider client={posthog}>
19
+
<PostHogPageView />
20
+
{children}
21
+
</PHProvider>
22
+
);
23
+
}