Analytics

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

Build Your Own

app/_components/web-vitals.js

'use client'
 
import { useReportWebVitals } from 'next/web-vitals'
 
export function WebVitals() {
  useReportWebVitals((metric) => {
    console.log(metric)
  })
}

app/layout.js

import { WebVitals } from './_components/web-vitals'
 
export default function Layout({ children }) {
  return (
    <html>
      <body>
        <WebVitals />
        {children}
      </body>
    </html>
  )
}

useReportWebVitals 훅은 "use client" 지시어가 필요하므로, 루트 레이아웃에서 가져오는 별도의 컴포넌트를 만드는 것이 가장 성능이 좋습니다. 이를 통해 클라이언트 경계를 WebVitals 컴포넌트에만 국한시킬 수 있습니다.

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 속성을 사용하여 처리할 수 있습니다.

app/_components/web-vitals.tsx

'use client'
 
import { useReportWebVitals } from 'next/web-vitals'
 
export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // FCP 결과 처리
      }
      case 'LCP': {
        // LCP 결과 처리
      }
      // ...
    }
  })
}

app/_components/web-vitals.js

'use client'
 
import { useReportWebVitals } from 'next/web-vitals'
 
export function WebVitals() {
  useReportWebVitals((metric) => {
    switch (metric.name) {
      case 'FCP': {
        // FCP 결과 처리
      }
      case 'LCP': {
        // LCP 결과 처리
      }
      // ...
    }
  })
}

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)에 대해 자세히 알아보세요.

Lazy Loading Instrumentation