Analytics

Next.js에는 성능 메트릭을 측정하고 보고하는 기본 지원이 포함되어 있습니다. useReportWebVitals 훅을 사용하여 직접 보고를 관리할 수 있으며, Vercel에서는 메트릭을 자동으로 수집하고 시각화하는 관리 서비스 (opens in a new tab)를 제공합니다.

Build Your Own

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'
 
function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    console.log(metric)
  })
 
  return <Component {...pageProps} />
}

API Reference를 참조하세요.

Web Vitals

Web Vitals (opens in a new tab)는 웹 페이지의 사용자 경험을 캡처하기 위한 유용한 메트릭 세트입니다. 다음 웹 바이탈이 모두 포함됩니다:

Time to First Byte (opens in a new tab) (TTFB)
First Contentful Paint (opens in a new tab) (FCP)
Largest Contentful Paint (opens in a new tab) (LCP)
First Input Delay (opens in a new tab) (FID)
Cumulative Layout Shift (opens in a new tab) (CLS)
Interaction to Next Paint (opens in a new tab) (INP)

이 메트릭의 모든 결과는 name 속성을 사용하여 처리할 수 있습니다.

pages/_app.js

import { useReportWebVitals } from 'next/web-vitals'
 
function MyApp({ Component, pageProps }) {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // FCP 결과 처리
      }
      case 'LCP': {
        // LCP 결과 처리
      }
      // ...
    }
  })
 
  return <Component {...pageProps} />
}

Custom Metrics

위의 기본 메트릭 외에도 페이지가 하이드레이트되고 렌더링되는 시간을 측정하는 몇 가지 추가 사용자 정의 메트릭이 있습니다:

Next.js-hydration: 페이지가 하이드레이션을 시작하고 완료하는 데 걸리는 시간(밀리초)
Next.js-route-change-to-render: 라우트 변경 후 페이지가 렌더링을 시작하는 데 걸리는 시간(밀리초)
Next.js-render: 라우트 변경 후 페이지 렌더링을 완료하는 데 걸리는 시간(밀리초)

이 메트릭의 결과는 별도로 처리할 수 있습니다:

export function reportWebVitals(metric) {
  switch (metric.name) {
    case 'Next.js-hydration':
      // 하이드레이션 결과 처리
      break
    case 'Next.js-route-change-to-render':
      // 라우트 변경 후 렌더링 결과 처리
      break
    case 'Next.js-render':
      // 렌더링 결과 처리
      break
    default:
      break
  }
}

이 메트릭은 User Timing API (opens in a new tab)를 지원하는 모든 브라우저에서 작동합니다.

Sending results to external systems

결과를 외부 시스템의 엔드포인트로 전송하여 사이트의 실제 사용자 성능을 측정하고 추적할 수 있습니다. 예를 들어:

useReportWebVitals((metric) => {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'
 
  // `navigator.sendBeacon()`이 사용 가능한 경우 이를 사용하고, 그렇지 않으면 `fetch()`를 사용합니다.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})

알아두면 좋은 점: Google Analytics (opens in a new tab)를 사용하는 경우 id 값을 사용하여 메트릭 분포를 수동으로 구성(백분위수 계산 등)할 수 있습니다.

useReportWebVitals((metric) => {
  // Google Analytics를 다음 예제처럼 초기화한 경우 `window.gtag`를 사용합니다:
  // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js
  window.gtag('event', metric.name, {
    value: Math.round(
      metric.name === 'CLS' ? metric.value * 1000 : metric.value,
    ), // 값은 정수여야 합니다
    event_label: metric.id, // 현재 페이지 로드에 고유한 id
    non_interaction: true, // 이탈률에 영향을 주지 않음
  })
})

Google Analytics로 결과 전송 (opens in a new tab)에 대해 자세히 알아보세요.

Package Bundling Lazy Loading