From 414167dd8c67029777c5a7f33878a868d2823619 Mon Sep 17 00:00:00 2001 From: Pascal Pixel Date: Mon, 23 Oct 2023 15:22:44 +0100 Subject: [PATCH 1/3] make app router clone for nextjs --- playground/nextjs-app-router/.gitignore | 36 + playground/nextjs-app-router/README.md | 9 + playground/nextjs-app-router/next.config.js | 6 + playground/nextjs-app-router/package.json | 25 + playground/nextjs-app-router/pages/_app.tsx | 39 + .../nextjs-app-router/pages/_document.tsx | 13 + .../nextjs-app-router/pages/animations.tsx | 57 + playground/nextjs-app-router/pages/iframe.tsx | 40 + playground/nextjs-app-router/pages/index.tsx | 68 + playground/nextjs-app-router/pages/long.tsx | 34 + playground/nextjs-app-router/pages/media.tsx | 29 + .../nextjs-app-router/styles/globals.css | 11 + playground/nextjs-app-router/tsconfig.json | 24 + playground/nextjs-app-router/yarn.lock | 2238 +++++++++++++++++ 14 files changed, 2629 insertions(+) create mode 100644 playground/nextjs-app-router/.gitignore create mode 100644 playground/nextjs-app-router/README.md create mode 100644 playground/nextjs-app-router/next.config.js create mode 100644 playground/nextjs-app-router/package.json create mode 100644 playground/nextjs-app-router/pages/_app.tsx create mode 100644 playground/nextjs-app-router/pages/_document.tsx create mode 100644 playground/nextjs-app-router/pages/animations.tsx create mode 100644 playground/nextjs-app-router/pages/iframe.tsx create mode 100644 playground/nextjs-app-router/pages/index.tsx create mode 100644 playground/nextjs-app-router/pages/long.tsx create mode 100644 playground/nextjs-app-router/pages/media.tsx create mode 100644 playground/nextjs-app-router/styles/globals.css create mode 100644 playground/nextjs-app-router/tsconfig.json create mode 100644 playground/nextjs-app-router/yarn.lock diff --git a/playground/nextjs-app-router/.gitignore b/playground/nextjs-app-router/.gitignore new file mode 100644 index 000000000..c87c9b392 --- /dev/null +++ b/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 diff --git a/playground/nextjs-app-router/README.md b/playground/nextjs-app-router/README.md new file mode 100644 index 000000000..f4a904447 --- /dev/null +++ b/playground/nextjs-app-router/README.md @@ -0,0 +1,9 @@ +## PostHog demo project + +First, run the development server: + +```bash +NEXT_PUBLIC_POSTHOG_KEY='' yarn dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. diff --git a/playground/nextjs-app-router/next.config.js b/playground/nextjs-app-router/next.config.js new file mode 100644 index 000000000..a843cbee0 --- /dev/null +++ b/playground/nextjs-app-router/next.config.js @@ -0,0 +1,6 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, +} + +module.exports = nextConfig diff --git a/playground/nextjs-app-router/package.json b/playground/nextjs-app-router/package.json new file mode 100644 index 000000000..0faedc7d7 --- /dev/null +++ b/playground/nextjs-app-router/package.json @@ -0,0 +1,25 @@ +{ + "name": "nextjs", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "@lottiefiles/react-lottie-player": "^3.5.3", + "@next/font": "13.1.6", + "@types/node": "18.13.0", + "@types/react": "18.0.28", + "@types/react-dom": "18.0.10", + "eslint": "8.34.0", + "eslint-config-next": "13.1.6", + "next": "13.1.6", + "posthog-js": "^1.45.1", + "react": "18.2.0", + "react-dom": "18.2.0", + "typescript": "4.9.5" + } +} diff --git a/playground/nextjs-app-router/pages/_app.tsx b/playground/nextjs-app-router/pages/_app.tsx new file mode 100644 index 000000000..32764f904 --- /dev/null +++ b/playground/nextjs-app-router/pages/_app.tsx @@ -0,0 +1,39 @@ +import '@/styles/globals.css' + +import React, { useEffect } from 'react' +import type { AppProps } from 'next/app' +import { useRouter } from 'next/router' + +import posthog from 'posthog-js' +import { PostHogProvider } from 'posthog-js/react' + +if (typeof window !== 'undefined') { + posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || '', { + api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com', + session_recording: { + recordCrossOriginIframes: true, + }, + debug: true, + }) + ;(window as any).posthog = posthog +} + +export default function App({ Component, pageProps }: AppProps) { + const router = useRouter() + + useEffect(() => { + // Track page views + const handleRouteChange = () => posthog.capture('$pageview') + router.events.on('routeChangeComplete', handleRouteChange) + + return () => { + router.events.off('routeChangeComplete', handleRouteChange) + } + }, []) + + return ( + + + + ) +} diff --git a/playground/nextjs-app-router/pages/_document.tsx b/playground/nextjs-app-router/pages/_document.tsx new file mode 100644 index 000000000..54e8bf3e2 --- /dev/null +++ b/playground/nextjs-app-router/pages/_document.tsx @@ -0,0 +1,13 @@ +import { Html, Head, Main, NextScript } from 'next/document' + +export default function Document() { + return ( + + + +
+ + + + ) +} diff --git a/playground/nextjs-app-router/pages/animations.tsx b/playground/nextjs-app-router/pages/animations.tsx new file mode 100644 index 000000000..73ca0d043 --- /dev/null +++ b/playground/nextjs-app-router/pages/animations.tsx @@ -0,0 +1,57 @@ +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' + +export default function Home() { + const posthog = usePostHog() + + return ( + <> + + PostHog + + +
+

Animations

+

Useful testing for Replay handling heavy animations

+ + + +
+ + ) +} diff --git a/playground/nextjs-app-router/pages/iframe.tsx b/playground/nextjs-app-router/pages/iframe.tsx new file mode 100644 index 000000000..a159583f9 --- /dev/null +++ b/playground/nextjs-app-router/pages/iframe.tsx @@ -0,0 +1,40 @@ +import Head from 'next/head' +import { usePostHog } from 'posthog-js/react' +import { useEffect, useState } from 'react' + +export default function Home() { + const posthog = usePostHog() + + const [otherHost, setOtherHost] = useState('') + + useEffect(() => { + setOtherHost(window.location.origin.includes('other-localhost') ? 'localhost' : 'other-localhost') + }) + + return ( + <> + + PostHog + + +
+

Iframes

+ +

Cross origin iframe

+

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

+ + {otherHost && ( +