💻 개발/코딩
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개 파일만 제공합니다. 코드 주석 외부에는 아무런 설명도 없습니다.
🔒 잠금 해제 후 전체 보기