Adds Next App Router SSR Flags example

playground/nextjs-app-router/.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_POSTHOG_KEY=""
+NEXT_PUBLIC_POSTHOG_HOST=""

playground/nextjs-app-router/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

playground/nextjs-app-router/README.md

@@ -0,0 +1,9 @@
+## PostHog demo project
+
+First, run the development server:
+
+```bash
+NEXT_PUBLIC_POSTHOG_KEY='<your-local-api-key>' yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

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 (
+        <>
+            <Player
+                src="https://lottie.host/7401522f-2d8b-4049-ad18-eb0edb6af224/CE9lFrNlEH.json"
+                // className="ph-no-capture"
+                background="Transparent"
+                speed={3}
+                style={{ width: 300, height: 300 }}
+                direction={1}
+                // mode="normal"
+                loop
+                // controls
+                autoplay
+            />
+            <Player
+                src="https://lottie.host/fb187981-8846-4ae9-98db-b95fc6347955/vO2S1YTZMn.json"
+                // className="ph-no-capture"
+                background="Transparent"
+                speed={3}
+                style={{ width: 300, height: 300 }}
+                direction={1}
+                // mode="normal"
+                loop
+                // controls
+                autoplay
+            />
+            <Player
+                src="https://lottie.host/3239c7de-e4de-4148-830d-e95b7f747f91/vftYOWDcUO.json"
+                // className="ph-no-capture"
+                background="Transparent"
+                speed={3}
+                style={{ width: 300, height: 300 }}
+                direction={1}
+                // mode="normal"
+                loop
+                // controls
+                autoplay
+            />
+        </>
+    )
+}

playground/nextjs-app-router/app/animations/page.tsx

@@ -0,0 +1,17 @@
+import Content from './content'
+
+export const metadata = {
+    title: 'PostHog',
+}
+
+export default function Page() {
+    return (
+        <>
+            <main>
+                <h1>Animations</h1>
+                <p>Useful testing for Replay handling heavy animations</p>
+                <Content />
+            </main>
+        </>
+    )
+}

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<string, string | boolean> }) {
+    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 (
+        <>
+            <main>
+                <h1>PostHog React</h1>
+
+                <p>The current time is {time}</p>
+
+                <div className="buttons">
+                    <button onClick={() => posthog.capture('Clicked button')}>Capture event</button>
+                    <button data-attr="autocapture-button">Autocapture buttons</button>
+                    <a data-attr="autocapture-button" href="#">
+                        <span>Autocapture a &gt; span</span>
+                    </a>
+
+                    <button className="ph-no-capture">Ignore certain elements</button>
+
+                    <button onClick={() => posthog?.identify('user-' + randomID())}>Identify</button>
+
+                    <button
+                        onClick={() =>
+                            posthog?.setPersonProperties({
+                                email: `user-${randomID()}@posthog.com`,
+                            })
+                        }
+                    >
+                        Set user properties
+                    </button>
+                </div>
+
+                <div className="buttons">
+                    <Link href="/animations">Animations</Link>
+                    <Link href="/iframe">Iframe</Link>
+                    <Link href="/media">Media</Link>
+                    <Link href="/long">Long</Link>
+                </div>
+
+                <p>
+                    Feature flag response: <code>{JSON.stringify(result)}</code>
+                </p>
+                <p>
+                    SSR feature flags: <code>{JSON.stringify(flags)}</code>
+                </p>
+            </main>
+        </>
+    )
+}

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 (
+        <>
+            <main>
+                <h1>Iframes</h1>
+
+                <h2>Cross origin iframe</h2>
+                <p>
+                    This loads the same page but from <b>other-localhost</b> which you need to add to your hosts file.
+                </p>
+
+                {otherHost && (
+                    <iframe
+                        src={`http://${otherHost}:3000/`}
+                        style={{ width: '100%', height: '500px' }}
+                        onLoad={() => {
+                            posthog.capture('iframe loaded')
+                        }}
+                    />
+                )}
+            </main>
+        </>
+    )
+}

playground/nextjs-app-router/app/iframe/page.tsx

@@ -0,0 +1,22 @@
+import Content from './content'
+
+export const metadata = {
+    title: 'PostHog',
+}
+
+export default function Page() {
+    return (
+        <>
+            <main>
+                <h1>Iframes</h1>
+
+                <h2>Cross origin iframe</h2>
+                <p>
+                    This loads the same page but from <b>other-localhost</b> which you need to add to your hosts file.
+                </p>
+
+                <Content />
+            </main>
+        </>
+    )
+}

playground/nextjs-app-router/app/layout.tsx

@@ -0,0 +1,17 @@
+import '@/styles/globals.css'
+import { ReactNode, Suspense } from 'react'
+import { PostHogPageview, Providers } from './providers'
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+    return (
+        <html lang="en">
+            <Suspense>
+                <PostHogPageview />
+            </Suspense>
+
+            <Providers>
+                <body>{children}</body>
+            </Providers>
+        </html>
+    )
+}

playground/nextjs-app-router/app/long/page.tsx

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+
+export const metadata = {
+    title: 'PostHog',
+}
+
+export default function Page() {
+    return (
+        <>
+            <main>
+                <h1>A long page</h1>
+                <div className="buttons">
+                    <Link href="/">Home</Link>
+                </div>
+
+                {Array.from({ length: 100 }, (_, i) => (
+                    <p key={i}>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+                        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                ))}
+
+                <div className="buttons">
+                    <Link href="/">Home</Link>
+                </div>
+            </main>
+        </>
+    )
+}

playground/nextjs-app-router/app/media/page.tsx

@@ -0,0 +1,30 @@
+export const metadata = {
+    title: 'PostHog',
+}
+
+export default function Page() {
+    return (
+        <>
+            <main>
+                <h1>Video</h1>
+                <p>Useful testing for Replay handling video elements</p>
+                <div style={{ margin: 10 }}>
+                    <h3>Video</h3>
+                    <video controls={true} style={{ width: 500 }}>
+                        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
+                    </video>
+                </div>
+
+                <div style={{ margin: 10 }}>
+                    <h3>Audio</h3>
+                    <audio controls={true}>
+                        <source
+                            src="https://github.com/rafaelreis-hotmart/Audio-Sample-files/raw/master/sample.mp3"
+                            type="audio/mp3"
+                        />
+                    </audio>
+                </div>
+            </main>
+        </>
+    )
+}

playground/nextjs-app-router/app/page.tsx

@@ -0,0 +1,30 @@
+import Home from './content'
+import { cookies } from 'next/headers'
+import { PostHog } from 'posthog-node'
+import { PostHogCapture } from './providers'
+
+function PostHogClient() {
+    const posthog = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY || '', {
+        host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com',
+    })
+    return posthog
+}
+
+export const metadata = {
+    title: 'PostHog',
+}
+
+export default async function Page() {
+    const randomID = () => Math.round(Math.random() * 10000)
+    const posthog = PostHogClient()
+    const cookieName = `ph_${process.env.NEXT_PUBLIC_POSTHOG_KEY || ''}_posthog`
+    const cookieStore = cookies()
+    const cookie = cookieStore.get(cookieName)
+    const distinctId = !cookie || !cookie.value ? randomID() : JSON.parse(cookie.value).distinct_id
+    const flags = await posthog.getAllFlags(distinctId)
+    return (
+        <PostHogCapture distinctId={distinctId}>
+            <Home flags={flags} />
+        </PostHogCapture>
+    )
+}