next analytics

In the ground since Sat Nov 01 2025

Last watered inSat Nov 01 2025

Next.js Analytics

Overview

Next.js provides two official packages for monitoring your application's performance and user behavior:

@vercel/analytics - User behavior tracking and custom events
@vercel/speed-insights - Real User Monitoring (RUM) for Core Web Vitals

Both tools work seamlessly on Vercel deployments with zero configuration, but can also be used with custom deployments.

Installation

Installing Both Packages

1yarn add @vercel/analytics @vercel/speed-insights

Installing Individually

1# For analytics only
2yarn add @vercel/analytics
3
4# For speed insights only
5yarn add @vercel/speed-insights

Setup

App Router Setup (Next.js 13+)

Add both components to your root layout file:

app/layout.tsx

1import { Analytics } from "@vercel/analytics/react";
2import { SpeedInsights } from "@vercel/speed-insights/next";
3
4export default function RootLayout({
5  children,
6}: {
7  children: React.ReactNode;
8}) {
9  return (
10    <html lang="en">
11      <body>
12        {children}
13        <Analytics />
14        <SpeedInsights />
15      </body>
16    </html>
17  );
18}

Pages Router Setup (Next.js 12 and below)

Add both components to your _app.tsx file:

pages/_app.tsx

1import type { AppProps } from "next/app";
2import { Analytics } from "@vercel/analytics/react";
3import { SpeedInsights } from "@vercel/speed-insights/next";
4
5export default function App({ Component, pageProps }: AppProps) {
6  return (
7    <>
8      <Component {...pageProps} />
9      <Analytics />
10      <SpeedInsights />
11    </>
12  );
13}

Analytics Features

Automatic Page View Tracking

The Analytics component automatically tracks:

Page views across all routes
User sessions
Geographic data
Device information
Referrer sources

Custom Event Tracking

Track custom user interactions:

1import { track } from "@vercel/analytics";
2
3const MyComponent = () => {
4  const handleClick = () => {
5    track("button_clicked", {
6      location: "header",
7      label: "Sign Up",
8    });
9  };
10
11  return <button onClick={handleClick}>Sign Up</button>;
12};

Event Properties

You can attach custom properties to events:

1track("purchase", {
2  value: 99.99,
3  currency: "USD",
4  item: "Premium Plan",
5});

Speed Insights Features

Core Web Vitals Monitoring

Speed Insights automatically tracks:

LCP (Largest Contentful Paint) - Loading performance
FID (First Input Delay) - Interactivity
CLS (Cumulative Layout Shift) - Visual stability
TTFB (Time to First Byte) - Server response time

Real User Monitoring

Unlike synthetic testing, Speed Insights collects data from real users:

Device-specific performance metrics
Geographic performance variations
Network condition impact
Browser-specific metrics

Configuration

Development Mode

By default, analytics are disabled in development. To enable:

1<Analytics mode="development" />

Custom Endpoint (Self-Hosting)

For non-Vercel deployments, configure a custom endpoint:

1<Analytics
2  beforeSend={(event) => {
3    // Modify or filter events
4    return event;
5  }}
6/>

Add environment variable:

1VERCEL_ANALYTICS_ID=your-analytics-id

Debug Mode

Enable debug logs during development:

1<Analytics debug={true} />
2<SpeedInsights debug={true} />

Enabling Analytics on Vercel Dashboard

After deploying your application with the Analytics and SpeedInsights components, you need to enable these features on Vercel:

Step 1: Navigate to Analytics Tab

Go to your project on the Vercel dashboard
Click the Analytics tab in the navigation

Step 2: Enable Web Analytics

You'll see an "Enable" button. Click it to open the configuration modal.

Enable Analytics Modal

Step 3: Choose Your Plan

Web Analytics on Hobby (Free):

50,000 events/month included
30 days viewable history
No Custom Events
Capped data ingestion

Web Analytics on Pro ($20/month):

Higher limits for custom events and data retention

Step 4: Enable Speed Insights

After enabling Analytics, you'll see a similar prompt for Speed Insights in the bottom right corner. Click Enable to activate it as well.

Viewing Your Data

Once enabled:

Analytics Tab - View user behavior data:
- Page views
- Visitors
- Top pages
- Geographic distribution
- Device and browser data
Speed Insights Tab - View performance metrics:
- Core Web Vitals (LCP, FID, CLS, TTFB)
- Real user monitoring data
- Performance trends over time

Data Collection Timeline

Initial data appears within 5-10 minutes after enabling
Full metrics populate as real users visit your site
Historical trends build up over the 30-day retention period

Best Practices

1. Privacy Considerations

Analytics respects user privacy:

No cookies are used
No personal data is collected
GDPR compliant by default

2. Performance Impact

Both packages are designed to be lightweight:

Analytics: ~1kb gzipped
Speed Insights: ~2kb gzipped
Loaded asynchronously after page load

3. Custom Events Strategy

4. Combining with Other Tools

Analytics and Speed Insights work alongside:

Google Analytics
Mixpanel
PostHog
Custom analytics solutions

Common Patterns

Conditional Loading

Load analytics only in production:

1{
2  process.env.NODE_ENV === "production" && (
3    <>
4      <Analytics />
5      <SpeedInsights />
6    </>
7  );
8}

Route-Specific Tracking

Track specific route patterns:

1"use client";
2
3import { usePathname } from "next/navigation";
4import { track } from "@vercel/analytics";
5import { useEffect } from "react";
6
7export const RouteTracker = () => {
8  const pathname = usePathname();
9
10  useEffect(() => {
11    if (pathname.startsWith("/dashboard")) {
12      track("dashboard_view", { path: pathname });
13    }
14  }, [pathname]);
15
16  return null;
17};

Troubleshooting

Analytics Not Showing Data

Verify components are added to root layout
Check environment variables for custom deployments
Ensure project is deployed (doesn't work on localhost by default)
Wait 5-10 minutes for data to appear

Speed Insights Missing Metrics

Ensure modern browser support (Chrome 60+, Firefox 55+, Safari 12+)
Check that HTTPS is enabled
Verify SpeedInsights component is properly imported

Debug Mode Not Working

1// Enable debug to see console logs
2<Analytics debug={process.env.NODE_ENV === "development"} />

Migration from Other Analytics

From Google Analytics

You can run both simultaneously:

1// Keep existing GA
2<Script
3  src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
4  strategy="afterInteractive"
5/>
6
7// Add Vercel Analytics
8<Analytics />

From Custom Solutions

Use the beforeSend hook to bridge data:

1<Analytics
2  beforeSend={(event) => {
3    // Send to your custom endpoint
4    yourCustomTracker.track(event);
5    return event;
6  }}
7/>