분석

Next.js는 성능 지표를 측정하고 보고하기 위한 내장 지원을 제공합니다. useReportWebVitals 훅을 사용하여 직접 보고를 관리하거나, 또는 Vercel에서 제공하는 관리형 서비스를 사용하여 자동으로 지표를 수집하고 시각화할 수 있습니다.

직접 구축하기

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 참조를 참조하세요.

웹 바이탈

웹 바이탈은 웹 페이지의 사용자 경험을 포착하는 것을 목표로 하는 유용한 지표 세트입니다. 다음과 같은 웹 바이탈이 모두 포함됩니다:

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 결과 처리
      }
      // ...
    }
  });
}

외부 시스템으로 결과 보내기

사이트에서 실제 사용자 성능을 측정하고 추적하기 위해 결과를 모든 엔드포인트로 보낼 수 있습니다. 예를 들어:

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를 사용하는 경우, 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로 결과 보내기에 대해 자세히 알아보세요.

지연 로딩 계측