피드로 돌아가기
Dev.toBackend
원문 읽기
월 $89 비용 절감 및 데이터 주권 확보를 위한 Next.js 기반 자체 Affiliate Tracking 설계
How to Build an Affiliate Program in Next.js (The Clean Way)
AI 요약
Context
외부 SaaS 솔루션 이용 시 단순 Query Parameter 추적 기능 대비 과도한 월 구독료 발생 및 데이터 종속성 심화. Stripe 결제 프로세스와의 결합 과정에서 쿠키 기반의 상태 유지와 서버 사이드 전송을 통한 정확한 Attribution 구현이 필요함.
Technical Solution
- Next.js Middleware를 통한 Server-side Referral Capture 및 HttpOnly 쿠키 설정을 통한 보안 강화
- Client JS 의존성을 제거한 Middleware 기반 설계로 초기 렌더링 성능 최적화 및 Zero-JS 추적 구현
- 정규표현식을 활용한
isValidRef검증 로직을 Middleware에 배치하여 비정상적인 파라미터 유입 차단 - Stripe Checkout Session의
metadata필드에 쿠키 값을 주입하여 결제 완료 후 Webhook을 통한 최종 귀속 처리 - 단순 추적 로직과 복잡한 관리 UI를 분리하여 RefearnApp과 같은 Self-hosted Backend를 통한 대시보드 인프라 구축
- localStorage 대신 Cookie를 채택하여 Server Component 및 API Route에서의 즉각적인 접근성 확보
실천 포인트
- 외부 서비스 도입 전 핵심 로직의 단순성(예: Query Param -> Cookie -> Metadata)을 분석하여 직접 구현 가능성 검토 - Next.js App Router 환경에서 전역 상태 추적이 필요할 때 Client Component보다 Middleware 우선 고려 - 결제 시스템 연동 시 외부 식별자를 시스템 내부 DB가 아닌 결제 게이트웨이의 Metadata 필드에 저장하여 데이터 무결성 유지 - 30일 이상의 긴 유지 기간이 필요한 추적 데이터의 경우 Cookie의 `maxAge` 설정과 `sameSite` 정책 정밀 설정