diff --git a/playground/nextjs-app-router/.env.example b/playground/nextjs-app-router/.env.example new file mode 100644 index 000000000..03071fdb6 --- /dev/null +++ b/playground/nextjs-app-router/.env.example @@ -0,0 +1,2 @@ +NEXT_PUBLIC_POSTHOG_KEY="" +NEXT_PUBLIC_POSTHOG_HOST="" diff --git a/playground/nextjs-app-router/app/animations/content.tsx b/playground/nextjs-app-router/app/animations/content.tsx new file mode 100644 index 000000000..acb4682f7 --- /dev/null +++ b/playground/nextjs-app-router/app/animations/content.tsx @@ -0,0 +1,46 @@ +'use client' + +import { Player } from '@lottiefiles/react-lottie-player' + +export default function Content() { + return ( + <> + + + + + ) +} diff --git a/playground/nextjs-app-router/app/animations/page.tsx b/playground/nextjs-app-router/app/animations/page.tsx index 73ca0d043..cb067ecf5 100644 --- a/playground/nextjs-app-router/app/animations/page.tsx +++ b/playground/nextjs-app-router/app/animations/page.tsx @@ -1,56 +1,16 @@ -import Head from 'next/head' -import { useFeatureFlagEnabled, usePostHog } from 'posthog-js/react' -import { useEffect, useState } from 'react' -import { Player, Controls } from '@lottiefiles/react-lottie-player' +import Content from './content' -export default function Home() { - const posthog = usePostHog() +export const metadata = { + title: 'PostHog', +} +export default function Page() { return ( <> - - PostHog - -

Animations

Useful testing for Replay handling heavy animations

- - - +
) diff --git a/playground/nextjs-app-router/app/content.tsx b/playground/nextjs-app-router/app/content.tsx new file mode 100644 index 000000000..441e5bf8b --- /dev/null +++ b/playground/nextjs-app-router/app/content.tsx @@ -0,0 +1,70 @@ +'use client' + +import Link from 'next/link' +import { useEffect, useState } from 'react' +import { useFeatureFlagEnabled, usePostHog } from 'posthog-js/react' + +export default function Content({ flags }: { flags: Record }) { + const posthog = usePostHog() + const result = useFeatureFlagEnabled('test') + + const [time, setTime] = useState('') + + useEffect(() => { + const t = setInterval(() => { + setTime(new Date().toISOString().split('T')[1].split('.')[0]) + }, 1000) + + return () => { + clearInterval(t) + } + }, []) + + const randomID = () => Math.round(Math.random() * 10000) + + return ( + <> +
+

PostHog React

+ +

The current time is {time}

+ +
+ + + + Autocapture a > span + + + + + + + +
+ +
+ Animations + Iframe + Media + Long +
+ +

+ Feature flag response: {JSON.stringify(result)} +

+

+ SSR feature flags: {JSON.stringify(flags)} +

+
+ + ) +} diff --git a/playground/nextjs-app-router/app/iframe/content.tsx b/playground/nextjs-app-router/app/iframe/content.tsx new file mode 100644 index 000000000..7c21cf356 --- /dev/null +++ b/playground/nextjs-app-router/app/iframe/content.tsx @@ -0,0 +1,37 @@ +'use client' + +import { usePostHog } from 'posthog-js/react' +import { useEffect, useState } from 'react' + +export default function Page() { + const posthog = usePostHog() + + const [otherHost, setOtherHost] = useState('') + + useEffect(() => { + setOtherHost(window.location.origin.includes('other-localhost') ? 'localhost' : 'other-localhost') + }) + + return ( + <> +
+

Iframes

+ +

Cross origin iframe

+

+ This loads the same page but from other-localhost which you need to add to your hosts file. +

+ + {otherHost && ( +