chore: Update nextjs project to have more realistic controls (#1151)

README.md

@@ -49,23 +49,15 @@ You can use the create react app setup in `playground/nextjs` to test posthog-js
 
 ## Developing together with another project
 
-Install Yalc to link a local version of `posthog-js` in another JS project: `npm install -g yalc` 
+Install pnpm to link a local version of `posthog-js` in another JS project: `npm install -g pnpm` 
 
 #### Run this to link the local version
 
-- In the `posthog-js` directory: `yalc publish`
-- In the other directory: `yalc add posthog-js`, then install dependencies  
-  (for `posthog` this means: `yalc add posthog-js && pnpm i && pnpm copy-scripts`)
 
-#### Run this to update the linked local version
+- In the `posthog-js` directory: `pnpm link --global`
+- (for `posthog` this means: `pnpm link --global posthog-js && pnpm i && pnpm copy-scripts`)
+- You can then remove the link with `pnpm link --global posthog-js
 
-- In the other directory: `yalc update`, then install dependencies  
-  (for `posthog` this means: `yalc update && pnpm i && pnpm copy-scripts`)
-
-#### Run this to unlink the local version
-
-- In the other directory: `yalc remove posthog-js`, then install dependencies  
-  (for `posthog` this means: `yalc remove posthog-js && pnpm i && pnpm copy-scripts`)
 
 ## Releasing a new version
 

package.json

@@ -9,7 +9,7 @@
         "start": "pnpm build-react && pnpm build-rollup -w",
         "build": "pnpm build-rollup && pnpm build-react",
         "build-rollup": "rm -rf lib && tsc -b && rollup -c --bundleConfigAsCjs",
-        "build-react": "cd react; pnpm i; pnpm build;",
+        "build-react": "cd react; NODE_ENV=dev pnpm i; pnpm build;",
         "lint": "eslint src && eslint cypress",
         "prettier": "prettier --write src/ functional_tests/",
         "prepublishOnly": "pnpm lint && pnpm test && pnpm build && pnpm test:react",
@@ -20,8 +20,7 @@
         "test:functional": "jest functional_tests",
         "test-watch": "jest --watch src",
         "cypress": "cypress open",
-        "prepare": "husky install",
-        "yalc-publish": "yalc publish"
+        "prepare": "husky install"
     },
     "main": "dist/module.js",
     "module": "dist/es.js",

playground/nextjs/.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.next/
+.yalc

playground/nextjs/package.json

@@ -5,25 +5,28 @@
     "scripts": {
         "clean-react": "cd ../../react && rm -rf ./node_modules/",
         "dev": "pnpm run link-posthog-js && pnpm run clean-react && next dev",
-        "build": "next build",
+        "build": "pnpm run build-posthog-js && pnpm run link-posthog-js && pnpm run clean-react && next build",
         "start": "next start",
         "lint": "next lint",
+        "build-posthog-js": "cd ../../ && NODE_ENV=dev pnpm i && pnpm run build",
         "link-posthog-js": "cd ../../ && pnpm link --global && cd playground/nextjs && pnpm link --global posthog-js"
     },
     "dependencies": {
         "@lottiefiles/react-lottie-player": "^3.5.3",
         "@types/node": "18.13.0",
         "@types/react": "18.0.28",
         "@types/react-dom": "18.0.10",
+        "cookie": "^0.6.0",
         "eslint": "8.34.0",
         "eslint-config-next": "13.1.6",
         "next": "13.5.6",
-        "posthog-js": "1.120.3",
+        "posthog-js": "1.128.3",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "typescript": "4.9.5"
     },
     "devDependencies": {
+        "@types/cookie": "^0.6.0",
         "autoprefixer": "^10.4.17",
         "postcss": "^8.4.35",
         "tailwindcss": "^3.4.1"

playground/nextjs/pages/_app.tsx

@@ -8,10 +8,22 @@ import posthog from 'posthog-js'
 import { PostHogProvider } from 'posthog-js/react'
 import { CookieBanner } from '@/src/CookieBanner'
 import '@/src/posthog'
+import Head from 'next/head'
+import { PageHeader } from '@/src/Header'
+import { useUser } from '@/src/auth'
+import { posthogHelpers } from '@/src/posthog'
 
 export default function App({ Component, pageProps }: AppProps) {
     const router = useRouter()
 
+    const user = useUser()
+
+    useEffect(() => {
+        if (user) {
+            posthogHelpers.setUser(user)
+        }
+    }, [user])
+
     useEffect(() => {
         // Track page views
         const handleRouteChange = () => posthog.capture('$pageview')
@@ -24,9 +36,16 @@ export default function App({ Component, pageProps }: AppProps) {
 
     return (
         <PostHogProvider client={posthog}>
-            <Component {...pageProps} />
+            <Head>
+                <title>PostHog</title>
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+            </Head>
 
-            <CookieBanner />
+            <main>
+                <PageHeader />
+                <Component {...pageProps} />
+                <CookieBanner />
+            </main>
         </PostHogProvider>
     )
 }

playground/nextjs/pages/_document.tsx

@@ -5,10 +5,11 @@ export default function Document() {
     return (
         <Html lang="en">
             <Head />
+
             <body>
                 <Main />
-                <NextScript />
             </body>
+            <NextScript />
         </Html>
     )
 }

playground/nextjs/pages/api/auth/login.ts

@@ -0,0 +1,16 @@
+import { serialize } from 'cookie'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+    const sessionData = req.body
+    const encryptedSessionData = JSON.stringify(sessionData)
+
+    const cookie = serialize('session', encryptedSessionData, {
+        httpOnly: false,
+        secure: false,
+        maxAge: 60 * 60 * 24 * 7, // One week
+        path: '/',
+    })
+    res.setHeader('Set-Cookie', cookie)
+    res.status(200).json({ message: 'Successfully set cookie!' })
+}

playground/nextjs/pages/api/auth/logout.ts

@@ -0,0 +1,13 @@
+import { serialize } from 'cookie'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+    const cookie = serialize('session', '', {
+        httpOnly: false,
+        secure: false,
+        maxAge: 1, // One week
+        path: '/',
+    })
+    res.setHeader('Set-Cookie', cookie)
+    res.status(200).json({ message: 'Successfully cleared cookie!' })
+}