@vercel/analytics

Privacy-first, cookie-free web analytics for React and Next.js — no GDPR banner required.

@vercel/analytics

React

Privacy-first, cookie-free web analytics for React and Next.js — no GDPR banner required.

npm GitHub Docs

Fit

Bundle (gzip)

1.6 kB

3.4 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Adding analytics to a web app usually means:

Setting up Google Analytics or Mixpanel and dealing with GDPR consent banners
Cookies that slow down your page and get blocked by ad blockers
Complex dashboards for data you mostly don't use
Privacy concerns about passing user data to third-party trackers

For most projects, you just want to know: how many visitors do I have, where are they coming from, and which pages are most popular?

What It Does

@vercel/analytics gives you real-time, privacy-friendly web analytics with zero configuration. It tracks page views and custom events without using cookies, without collecting personal data, and without getting blocked by most ad blockers. One component added to your app — that's it.

Installation

bash

npm install @vercel/analytics

Usage Example

Next.js App Router (add once in layout.tsx)

tsx

// app/layout.tsx
import { Analytics } from "@vercel/analytics/react";

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

Tracking custom events

tsx

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

function SignupButton() {
  return (
    <button
      onClick={() => {
        track("signup_clicked", { plan: "pro" });
      }}
    >
      Sign up for Pro
    </button>
  );
}

Pages Router

tsx

// pages/_app.tsx
import { Analytics } from "@vercel/analytics/react";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.