-
[Vercel] Analytics, Speed Insights 설치와 Next14 적용Front-end 개발/배포 2024. 11. 18. 20:09
Vercel로 배포를 한 뒤 사용할 수 있는 주요 기능인 Analytics와 Speed Insights는 각각 웹사이트의 트래픽 및 성능을 모니터링을 위한 도구이다. 이를 Next.js 14의 App Router 버전의 코드에 적용해본다.
1. Vercel Analytics 설치
Vercel Analytics는 웹사이트의 실시간 트래픽 통계를 제공한다. 이를 통해 페이지의 조회수와 사용자 행동을 추적할 수 있다. 이 기능은 개발 모드에서는 작동하지 않으며, 배포된 애플리에케이션에서만 데이터를 추적한다. Analytics의 가장 큰 장점은 어떤 페이지가 가장 많이 방문되고 있는지, 사용자가 어떤 특정 이벤트를 많이 발생시키는지 드을 분석할 수 있다.
일반적으로 이 컴포넌트는 모든 페이지에서 트래픽을 추적할 수 있도록 최상위 레벨의 컴포넌에 추가한다.
npm i @vercel/analytics2. Vercel Speed Insights 설치
Vercel Speed Insights는 웹사이트의 성능을 측정하고 개선할 수 있는 방안을 제공한다. 이를 통해 Core Web Vitals와 같은 중요한 성능 지표를 모니터링 할 수 있다. 예를 들어 First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Layout Shfit (CLS) 등의 지표를 측정하여 웹사이트의 로딩 속도와 사용자 경험을 개선할 수 있다. 이를 통해 개발자는 웹사이트의 성능을 최적화하고, 사용자에게 더 나은 경험을 제공할 수 있다.
이를 통해 Vercel Speed Insight를 활용하면 로딩 속도, 응답성, 시각적 안정성, 최종 사용자 경험에 기여하는 메트릭에 대한 인사이트를 얻을 수 있다.
일반적으로 SpeedInsights 컴포넌트 또한 Analytics와 마찬가지로 최상위 레벨의 컴포넌트에 추가한다.npm i @vercel/speed-insights3. Next.js 프로젝트에 적용
Next.js 프로젝트에서 App Rouer 버전을 사용하는 경우, <Analytics />와 <SpeedInsights /> 컴포넌트를 최상위 layout.tsx 파일에 넣는 것이 좋다. layout.tsx 파일은 같은 위치의 경로와 하위 경로의 모든 페이지에 공통된 레이아웃을 제공하기 때문에, 최상위 layout.tsx 파일에서 Analytics와 Speed Insights를 초기화하면 모든 페이지에서 트랙픽 및 성능을 추적할 수 있다.
예를 들어, app/layout.tsx 파일에 다음과 같이 추가할 수 있다.
import { Analytics } from '@vercel/analytics/react'; export default function RootLayout({ children }) { return ( <html lang="ko"> <body> {children} <Analytics /> <SpeedInsights/> </body> </html> ); }Analytics와 Speed Insights를 적용한 뒤 배포 사이트에서 캡쳐하면 아래와 같다.
Vercel Speed Insights 
Vercel Analytics 4. Reference
참고1. React+Typescript+Vite 프로젝트 Vercel 배포하기
참고2. vercel에 react 배포하기