Intégration PostHog de qualité production pour 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}", "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 EventProperties = {\n [AnalyticsEvents.CHECKOUT_STARTED]: {\n plan: string\n polar_customer_id?: string\n }\n [AnalyticsEvents.SUBSCRIPTION_CREATED]: {\n revenue: number\n currency: string\n polar_customer_id: string\n }\n [AnalyticsEvents.ERROR]: {\n message: string\n stack?: string\n }\n}\n\nexport function trackEvent<T extends AnalyticsEvents>(\n event: T,\n properties: EventProperties[T]\n): void {\n if (typeof window === 'undefined') return\n posthog.capture(event, properties)\n}\n\nexport function setUserProperty(key: string, value: string | number | boolean): void {\n if (typeof window === 'undefined') return\n posthog.setPersonProperties({ [key]: value })\n}", "hooks/useAnalyticsAuth.ts": "'use client'\n\nimport { useEffect } from 'react'\nimport { createClient } from '@/lib/supabase/client'\nimport posthog from 'posthog-js'\n\nexport function useAnalyticsAuth(): void {\n useEffect(() => {\n const supabase = createClient()\n\n const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {\n if (event === 'SIGNED_IN' && session?.user) {\n posthog.identify(session.user.id)\n }\n\n if (event === 'SIGNED_OUT') {\n posthog.reset()\n }\n })\n\n return () => {\n subscription.unsubscribe()\n }\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 posthog.capture('$pageview', { path: url })\n lastTrackedPath.current = url\n }\n }, [pathname, searchParams])\n\n return null\n}", "app/layout.tsx": "import type { Metadata } from 'next'\nimport { Providers } from './providers'\n\nexport const metadata: Metadata = {\n title: 'SaaS App',\n description: 'Production-grade SaaS with analytics'\n}\n\nexport default function RootLayout({\n children\n}: {\n children: React.ReactNode\n}): React.ReactElement {\n return (\n <html lang=\"en\">\n <body>\n <Providers>{children}</Providers>\n </body>\n </html>\n )\n}" }