💻 개발/코딩

Next.js 15용 PostHog 통합

Next.js 15 App Router용 프로덕션 등급 PostHog 분석 통합 — Providers 패턴, Supabase 인증 동기화, Polar 빌링 추적 및 Suspense 안전 SPA 탐색을 다룹니다.

미리보기

Next.js 15 (App Router)용 프로덕션 등급 PostHog 통합. 협상 불가 규칙: - PostHog는 클라이언트 컴포넌트에서만 사용 — 서버 컴포넌트, 라우트 핸들러 또는 API 라우트에서는 절대 사용하지 않음 - 모든 분석은 lib/analytics.ts 추상화 계층을 통해 처리 - ID는 인증 상태 (Supabase)에 의해서만 제어됨 제공할 구현 파일: 1. app/providers.tsx: 'use client', PostHogProvider, capture_pageview:false, session replay with mask_all_text_inputs:true 2. hooks/useAnalyticsAuth.ts: Supabase onAuthStateChange -> SIGNED_IN 시 posthog.identify(), SIGNED_OUT 시 posthog.reset() 3. lib/analytics.ts: AnalyticsEvents enum, 타입이 지정된 trackEvent 래퍼, SSR 안전을 위한 window 확인 4. components/PostHogPageView.tsx: usePathname + useSearchParams, Suspense 경계로 래핑되어야 함 (Next.js 15 요구 사항) 5. 빌링 (Polar): distinct_id = Supabase 사용자 ID, revenue/currency와 함께 CHECKOUT_STARTED 및 SUBSCRIPTION_CREATED 추적 출력: 위의 5개 파일만 제공합니다. 코드 주석 외부에는 아무런 설명도 없습니다.
🔒 잠금 해제 후 전체 보기

AI에서 열기

공유하기