Vercel Analytics

Add privacy-friendly page view and web vitals tracking to your site with Vercel Analytics.

Overview

Privacy-friendly, no cookies, no consent banner needed.
Tracks page views, referrers, top pages, and geography out of the box.
Works automatically with Next.js, no route-change wiring required.
Free tier includes 25k events/month on Hobby plans.
See the official Vercel Analytics docs for the full API reference and advanced configuration.

Setup

1. Install the package

pnpm add @vercel/analytics

2. Add the component

Drop <Analytics /> into your root layout. It renders nothing visible, it just loads the tracking script.

src/app/layout.tsx

import { Analytics } from "@vercel/analytics/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

3. Deploy to Vercel

Analytics data appears in your Vercel project dashboard under the Analytics tab once the site is deployed. No environment variables or additional configuration needed.

During local development, analytics events are not sent by default. You can enable dev mode by passing <Analytics mode="development" /> but this is rarely needed.

Custom Events

Track specific user interactions beyond page views with the track function.

Example

import { track } from "@vercel/analytics";

<Button onClick={() => track("cta_click", { location: "hero" })}>
  Get Started
</Button>

Custom events appear in the Vercel dashboard under the Events tab. Pass an optional object as the second argument to attach metadata.