Vercel - Nextjs 방문자 수 집계, 웹 분석 이용하기

📒 Vercel - Nextjs 방문자 수 집계, 웹 분석 이용하기

이번에 사이드 프로젝트를 Vercel에 배포하고 방문자 수를 확인하고 싶어 찾아보니

Velcel에서 자체적으로 제공하는 좋은 툴이 있어서 소개드립니다.

📌 Vercel Web Analytics

Vercel Web Analytics을 이용하기 위한 방법은 정말 간단합니다.

🔎 패키지 설치

$ npm i @vercel/analytics

🔎 <Analytics /> 컴포넌트 추가하기

import { Analytics } from '@vercel/analytics/react';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <title>Next.js</title>
      </head>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

🔎 Vercel > Project > Analytics에서 확인하기

두단계만 거치면 Vercel의 Analytics 탭에서 즉시 확인이 가능합니다.

대략 주요하게 확인할 수 있는 정보는 다음과 같습니다.

현재 웹에 접속 중인 유저
방문자수
조회수
페이지별 조회수
유입경로
국가
기기
OS

무료인데도 너무나 알차네요.

Vercel로 배포했다면 사용자 추적을 위해 이 기능을 꼭 이용해보시길 바랍니다.

자세한 내용은 다음 공식 문서를 참고하세요.

Vercel Web Analytics Quickstart

Vercel Web Analytics provides you detailed insights into your website's visitors. This quickstart guide will help you get started with using Analytics on Vercel.

vercel.com

저작자표시 비영리 변경금지

'React > Nextjs' 카테고리의 다른 글

[NextJS, SEO] AppRouter Dynamic Sitemap.xml 생성하기 (0)	2024.11.22
[NextJS, SEO] AppRouter Dynamic Metadata 생성하기 (0)	2024.11.21
[Nextjs] react-query를 이용한 서버 데이터 Prefetch 방법 (0)	2024.09.12
[Nextjs] searchParams로 URL 쿼리 스트링 파싱하기 (0)	2024.09.09
[Nextjs] Dynamic Route, 동적 라우팅 (0)	2024.08.03