How to set up Vercel Web Analytics in Next.js, React and more

The short version

1. Turn on Web Analytics for the project in the Vercel dashboard.
2. Install @vercel/analytics and add its component (or one line of setup) to your app.
3. Deploy, open the site, and check that a view request goes out.

It takes a few minutes per project. Vercel’s quickstart has the same steps for every framework; this guide adds how to check it worked and what to do when no data shows up.

1. Turn on Web Analytics in Vercel

In the Vercel dashboard, open Analytics in the sidebar, pick the project, and click Enable. Nothing is collected yet: enabling adds the routes the script loads from and reports to, and they go live with your next deployment. Do this step first. Code deployed before it is the most common reason for a 404 on the script and an empty dashboard.

2. Install the package

npm i @vercel/analytics
# or: pnpm i @vercel/analytics · yarn add @vercel/analytics · bun add @vercel/analytics

Version 2 of the package is current. It is MIT licensed and needs no configuration on Vercel: the build passes it the right script and endpoint paths.

3. Add it to your app

Add the component once, in the layout every page shares. The Next.js, SvelteKit, Vue (with vue-router), Astro and Remix versions track client-side navigation and group pages by route, so /blog/a and /blog/b also show up as /blog/[slug]. The plain React component and inject() count page views but don’t know your routes.

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

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

import type { AppProps } from 'next/app';
import { Analytics } from '@vercel/analytics/next';

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

import { Analytics } from '@vercel/analytics/react';

export default function App() {
  return (
    <div>
      {/* ... */}
      <Analytics />
    </div>
  );
}

import { dev } from '$app/environment';
import { injectAnalytics } from '@vercel/analytics/sveltekit';

injectAnalytics({ mode: dev ? 'development' : 'production' });

export default defineNuxtConfig({
  modules: ['@vercel/analytics'],
});

<script setup lang="ts">
import { Analytics } from '@vercel/analytics/vue';
</script>

<template>
  <Analytics />
  <!-- your content -->
</template>

---
import Analytics from '@vercel/analytics/astro';
---

<html lang="en">
  <head>
    <Analytics />
  </head>
  <body>
    <slot />
  </body>
</html>

import { Analytics } from '@vercel/analytics/remix';

// In the root component's <body>, before <Outlet />:
<Analytics />

import { inject } from '@vercel/analytics';

inject();

Plain HTML

No package needed. Add the snippet from Vercel’s quickstart to every page, where <unique-path> is your project’s analytics path. Without a framework there is no route grouping.

<script>
  window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/<unique-path>/script.js"></script>

4. Deploy and check that it works

Deploy to production, open the site, and look at the browser’s Network tab (filter by Fetch/XHR). Each page view sends a request ending in /view. If it’s there with a 2xx status, visits are being recorded, and they appear under the project’s Analytics tab as people visit.

On your own machine, nothing is sent. In development the package runs in debug mode and logs each event to the browser console instead, so a quiet dashboard while you test locally is expected. To force it, pass mode="production" or debug to the component (package options).

No data? The usual causes

• Enabled after deploying. Redeploy, then make sure the new deployment is the production one (Deployments › ⋯ › Promote to Production).
• A proxy in front of Vercel. Cloudflare or another reverse proxy has to forward the analytics paths (/_vercel/insights/* and your /<unique-path>/*) to Vercel, and it can blur countries and visitor counts. Vercel recommends pointing the domain straight at Vercel.
• Pages missing or not grouped. Update to the latest package and use the framework import (@vercel/analytics/next in Next.js, not /react).
• Hobby limit reached. Past 50,000 events a month, after a three-day grace period, Vercel pauses collection until the allowance resets. See what Vercel Analytics costs.
• Blocked by an extension. The script is served from your own domain, so most blockers let it through, but a few strict ones don’t. Try a clean browser profile before assuming it’s broken.

Vercel’s troubleshooting page covers the same cases.

Leave pages out with beforeSend

Every page view is an event, and events are billed. To keep admin pages, internal tools or private URLs out of the data (and the bill), return null for them from beforeSend. You can also rewrite the URL there, for example to strip a token from the query string.

import { Analytics, type BeforeSendEvent } from '@vercel/analytics/next';

<Analytics
  beforeSend={(event: BeforeSendEvent) => {
    if (event.url.includes('/admin')) return null; // not counted, not billed
    return event;
  }}
/>

Next steps

• Custom events (Pro and above): call track('signup') where something happens. See conversions in Vercel Analytics.
• Campaigns: UTM parameters need Web Analytics Plus. See UTM campaigns.
• Speed Insights is a separate package, @vercel/speed-insights, with a <SpeedInsights /> component added the same way (quickstart). See Core Web Vitals on Vercel.
• Google Analytics as well? They run side by side. Vercel Analytics vs. Google Analytics 4 explains what each is for and why their numbers differ.

Setting it up on many projects

Web Analytics is turned on per project, and Vercel shows one project at a time. Lookout connects to a Vercel team, lists which projects already collect analytics, and for the rest links to the setting and shows the snippet for that project’s framework, then puts every project’s numbers side by side on one board. See Vercel Analytics for multiple projects, or try the live demo.