프로덕션 등급 PostHog 통합 for Next.js 15

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