Next.js를 위한 분석

Next.js를 위한 제품 분석

Next.js 앱에 PulsePanda를 넣으면 App Router든 Pages Router든 모든 라우트에서 페이지뷰, 이벤트, 세션 리플레이, 히트맵을 캡처할 수 있습니다 — 백엔드를 연결하거나 하이드레이션과 씨름할 필요가 없습니다.

무료로 시작하기 설치 가이드

왜 중요한가

Next.js 팀이 마침내 볼 수 있는 것

라우트 변경이 추적되지 않습니다

Next.js의 클라이언트 측 내비게이션은 전체 페이지 로드를 일으키지 않으므로, 단순한 분석 도구는 대부분의 뷰를 놓칩니다. PulsePanda는 라우터를 후킹하여 모든 라우트 변경을 집계합니다.

기능을 깜깜이로 출시합니다

가입, 업그레이드, 기능 사용에 대한 커스텀 이벤트를 추적하여 각 배포 후 무엇이 실제로 사용되는지 확인하세요.

버그를 재현하기 어렵습니다

세션 리플레이는 정확한 DOM과 콘솔 오류를 기록하므로, 스택 트레이스에서 추측하는 대신 깨진 렌더링을 볼 수 있습니다.

설정

Next.js에 PulsePanda 추가하기

루트 레이아웃에 스니펫을 한 번만 추가하세요. Next.js를 사용하세요 Script 컴포넌트와 함께 afterInteractive 첫 페인트를 차단하지 않고 로드되도록.

App Router — app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://pulsepanda.dev/sdk.js"
          data-project="YOUR_PROJECT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router를 사용하시나요? 동일한 것을 추가하세요 <Script> 위치 pages/_app.tsx 대신. 웹 분석, 자동 캡처 클릭, 세션 리플레이, 히트맵이 즉시 시작됩니다.

워크플로

설치에서 인사이트까지

스니펫 설치

Next.js 프로젝트에 스크립트를 한 번만 추가하세요. 웹 분석, 자동 캡처 클릭, 세션 리플레이, 히트맵이 즉시 수집을 시작합니다.

중요한 것을 추적하세요

호출하세요 pulsepanda.track() 주요 액션에서 그리고 pulsepanda.identify() 로그인 후 이벤트, 세션, 피드백을 각 사용자와 연결하세요.

데이터로 행동하기

퍼널을 구축하고, 이탈 뒤의 리플레이를 보고, 히트맵을 읽고, 제품 내 피드백을 수집하세요 — 모두 하나의 워크스페이스에서.

제공 내용

스니펫 하나로 전체 그림을

분석 레이어페이지뷰, 커스텀 이벤트, 전환 퍼널, 그리고 리텐션.

행동 레이어세션 리플레이, 클릭 및 스크롤 히트맵, 그리고 오류 맥락.

피드백 레이어제품 내 설문, 피드백 위젯, 폼, 그리고 기능 투표 보드.

자주 묻는 질문

Next.js 관련 질문

PulsePanda가 Next.js의 클라이언트 측 라우트 변경을 추적하나요?

예. SDK는 History API 내비게이션을 수신하므로, 모든 App Router 또는 Pages Router 전환이 자동으로 페이지뷰로 집계됩니다 — 수동 라우터 이벤트가 필요 없습니다.

스니펫이 Core Web Vitals를 해치나요?

아니요. 스크립트는 지연되어 afterInteractive 전략으로 로드되므로, 콘텐츠가 그려진 후에 실행되며 LCP나 상호작용을 차단하지 않습니다.

서버 컴포넌트에서 커스텀 이벤트를 전송할 수 있나요?

커스텀 이벤트는 pulsepanda.track()을 사용해 브라우저에서 전송됩니다. 클라이언트 컴포넌트나 이벤트 핸들러에서 호출하세요. 서버 컴포넌트는 SDK를 로드하는 페이지를 렌더링합니다.

더 살펴보기

Next.js 앱에 분석 추가하기

한 번 설치하고 몇 분 만에 분석, 세션 리플레이, 히트맵, 퍼널, 피드백을 연결하세요.

무료로 시작하기