生产级PostHog集成，适用于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 mask_all_text_inputs: true,\n persistence: 'localStorage+cookie',\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\nexport function trackEvent(\n event: AnalyticsEvents,\n properties?: Record<string, unknown>\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 trackEvent(AnalyticsEvents.ERROR, { message, stack })\n}\n\nexport function setUserProperties(properties: Record<string, unknown>): void {\n if (typeof window === 'undefined') {\n return\n }\n\n posthog.register(properties)\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 } from 'react'\nimport posthog from 'posthog-js'\n\nexport default function PostHogPageView(): null {\n const pathname = usePathname()\n const searchParams = useSearchParams()\n\n useEffect(() => {\n if (pathname) {\n posthog.capture('$pageview', {\n pathname,\n search: searchParams?.toString() || '',\n })\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}): React.ReactElement {\n return (\n <html lang=\"en\">\n <body>\n <Providers>{children}</Providers>\n </body>\n </html>\n )\n}\n" }