Produktionsreife PostHog-Integration für Next.js 15

{ "package.json": { "dependencies": { "posthog-js": "^1.200.0" } }, "app/providers.tsx": "'use client';\n\nimport { PostHogProvider } from 'posthog-js/react';\nimport posthog from 'posthog-js';\nimport { Suspense, useEffect } from 'react';\nimport PostHogPageView from '@/components/PostHogPageView';\nimport { useAnalyticsAuth } from '@/hooks/useAnalyticsAuth';\n\nif (typeof window !== 'undefined') {\n posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {\n api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',\n capture_pageview: false,\n capture_pageleave: true,\n session_replay: {\n mask_all_text_inputs: true\n }\n });\n}\n\nexport function Providers({ children }: { children: React.ReactNode }) {\n useAnalyticsAuth();\n\n return (\n <PostHogProvider client={posthog}>\n <Suspense fallback={null}>\n <PostHogPageView />\n </Suspense>\n {children}\n </PostHogProvider>\n );\n}\n", "lib/analytics.ts": "import posthog from 'posthog-js';\n\nexport enum AnalyticsEvents {\n CHECKOUT_STARTED = 'CHECKOUT_STARTED',\n SUBSCRIPTION_CREATED = 'SUBSCRIPTION_CREATED',\n ERROR = '$exception'\n}\n\ntype AnalyticsProperties = {\n [key: string]: string | number | boolean | null | undefined;\n};\n\nexport function trackEvent(\n event: AnalyticsEvents,\n properties?: AnalyticsProperties\n): void {\n if (typeof window === 'undefined') {\n return;\n }\n\n posthog.capture(event, properties);\n}\n\nexport function trackError(message: string, stack?: string): void {\n if (typeof window === 'undefined') {\n return;\n }\n\n posthog.capture(AnalyticsEvents.ERROR, {\n message,\n stack\n });\n}\n", "hooks/useAnalyticsAuth.ts": "'use client';\n\nimport { useEffect } from 'react';\nimport { useSupabase } from '@/hooks/useSupabase';\nimport posthog from 'posthog-js';\n\nexport function useAnalyticsAuth(): void {\n const supabase = useSupabase();\n\n useEffect(() => {\n const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {\n if (event === 'SIGNED_IN' && session?.user) {\n posthog.identify(session.user.id, {\n email: session.user.email,\n name: session.user.user_metadata?.full_name\n });\n }\n\n if (event === 'SIGNED_OUT') {\n posthog.reset();\n }\n });\n\n return () => {\n subscription.unsubscribe();\n };\n }, [supabase]);\n}\n", "components/PostHogPageView.tsx": "'use client';\n\nimport { usePathname, useSearchParams } from 'next/navigation';\nimport { useEffect, useRef } from 'react';\nimport posthog from 'posthog-js';\n\nexport default function PostHogPageView(): null {\n const pathname = usePathname();\n const searchParams = useSearchParams();\n const lastTrackedPath = useRef<string | null>(null);\n\n useEffect(() => {\n const url = pathname + (searchParams?.toString() ? `?${searchParams.toString()}` : '');\n\n if (lastTrackedPath.current === url) {\n return;\n }\n\n lastTrackedPath.current = url;\n posthog.capture('$pageview', {\n path: pathname,\n search: searchParams?.toString() || '',\n url\n });\n }, [pathname, searchParams]);\n\n return null;\n}\n", "app/layout.tsx": "import type { Metadata } from 'next';\nimport { Providers } from '@/app/providers';\n\nexport const metadata: Metadata = {\n title: 'SaaS App',\n description: 'Production-grade SaaS application'\n};\n\nexport default function RootLayout({\n children\n}: {\n children: React.ReactNode;\n}) {\n return (\n <html lang=\"en\">\n <body>\n <Providers>\n {children}\n </Providers>\n </body>\n </html>\n );\n}\n" }