Skip to main content

Next.js Analytics

In today's data-driven world, understanding how users interact with your application is essential for making informed decisions about feature development, user interface improvements, and business strategy. Next.js provides built-in analytics capabilities and seamlessly integrates with popular third-party analytics tools to help you track and analyze user behavior on your applications.

Introduction to Analytics in Next.js​

Analytics in web applications involves collecting, measuring, and analyzing data about user interactions to gain insights into user behavior, application performance, and business outcomes. Next.js offers a built-in solution called Next.js Analytics that allows you to track various web vitals and performance metrics without additional configuration.

Additionally, Next.js makes it easy to integrate with third-party analytics providers such as Google Analytics, Mixpanel, or Amplitude for more comprehensive tracking capabilities.

Built-in Next.js Analytics​

Next.js provides a zero-configuration analytics solution that automatically collects and reports Web Vitals metrics. This feature is available in Next.js 11 and later versions.

Web Vitals in Next.js​

Web Vitals are a set of useful metrics that aim to capture the user experience of a web page. Next.js has integrated the collection of these metrics to help developers understand the real-world performance of their applications.

To see the collected metrics, you need to enable the reportWebVitals function in your _app.js or _app.tsx file:

jsx
// pages/_app.js
export function reportWebVitals(metric) {
  console.log(metric);
}

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

The metric object contains various properties depending on the type of metric being reported:

js
// Example metric object
{
  id: "v3-1654895883896-9175577820587",
  name: "FCP",
  startTime: 391.59999978542327,
  value: 391.59999978542327,
  label: "web-vital"
}

Sending Metrics to Analytics Services​

You can send these metrics to any analytics service by adapting the reportWebVitals function:

jsx
// pages/_app.js
export function reportWebVitals(metric) {
  const url = 'https://example.com/analytics';
  const body = JSON.stringify(metric);
  
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, { 
      body, 
      method: 'POST', 
      keepalive: true 
    });
  }
}

Integration with Google Analytics​

Google Analytics is one of the most popular analytics tools. Here's how to integrate it with your Next.js application:

Setting Up Google Analytics​

  1. First, create a Google Analytics account and set up a property to obtain your measurement ID (starts with "G-").

  2. Install the Google Analytics package:

bash
npm install --save react-ga
# or
yarn add react-ga
  1. Create a utility file to initialize and track page views:
jsx
// lib/gtag.js
export const GA_MEASUREMENT_ID = 'G-XXXXXXXXXX'; // Replace with your measurement ID

// Initialize Google Analytics
export const initGA = () => {
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    window.dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', GA_MEASUREMENT_ID);
};

// Track page views
export const logPageView = (url) => {
  window.gtag('config', GA_MEASUREMENT_ID, {
    page_path: url,
  });
};

// Track events
export const logEvent = (action, params) => {
  window.gtag('event', action, params);
};
  1. Update your _app.js to initialize Google Analytics and track page views:
jsx
// pages/_app.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import * as gtag from '../lib/gtag';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  
  useEffect(() => {
    // Initialize Google Analytics
    const script = document.createElement('script');
    script.src = `https://www.googletagmanager.com/gtag/js?id=${gtag.GA_MEASUREMENT_ID}`;
    script.async = true;
    document.head.appendChild(script);
    
    script.onload = () => {
      gtag.initGA();
    };
    
    // Track page views when the route changes
    const handleRouteChange = (url) => {
      gtag.logPageView(url);
    };
    
    router.events.on('routeChangeComplete', handleRouteChange);
    
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);
  
  return <Component {...pageProps} />;
}

export default MyApp;
  1. Add the script tag to your _document.js file:
jsx
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { GA_MEASUREMENT_ID } from '../lib/gtag';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', '${GA_MEASUREMENT_ID}', {
                  page_path: window.location.pathname,
                });
              `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Tracking Custom Events​

To track specific user interactions or custom events:

jsx
// components/Button.js
import { logEvent } from '../lib/gtag';

export default function Button({ children }) {
  const handleClick = () => {
    logEvent('button_click', {
      button_label: children,
      page_location: window.location.pathname,
    });
    // Rest of your click handler
  };

  return (
    <button onClick={handleClick}>{children}</button>
  );
}

Vercel Analytics​

If your Next.js application is deployed on Vercel, you can leverage Vercel Analytics (formerly called Vercel Insights) which provides additional features specifically designed for Next.js applications.

Setting Up Vercel Analytics​

  1. Go to your Vercel dashboard
  2. Select your project
  3. Navigate to the "Analytics" tab
  4. Click "Enable Analytics"

Once enabled, Vercel Analytics will automatically collect:

  • Web Vitals metrics
  • Page views and unique visitors
  • Top pages
  • Geographic information
  • Device and browser information

No code changes are required to use Vercel Analytics if your app is deployed to Vercel.

Implementing a Custom Analytics Solution​

If you need more control over your analytics implementation, you can create a custom solution:

  1. Create a custom hook for tracking:
jsx
// hooks/useAnalytics.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';

export function useAnalytics() {
  const router = useRouter();
  
  useEffect(() => {
    // Function to send analytics data to your backend
    const sendAnalytics = (data) => {
      fetch('/api/analytics', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });
    };
    
    // Track page views
    const handleRouteChange = (url) => {
      sendAnalytics({
        type: 'pageview',
        url,
        timestamp: new Date().toISOString(),
      });
    };
    
    // Initial page load
    handleRouteChange(router.pathname);
    
    // When route changes
    router.events.on('routeChangeComplete', handleRouteChange);
    
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router]);
  
  // Function to track custom events
  const trackEvent = (eventName, eventData = {}) => {
    fetch('/api/analytics', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        type: 'event',
        eventName,
        eventData,
        timestamp: new Date().toISOString(),
      }),
    });
  };
  
  return { trackEvent };
}
  1. Create an API route to handle analytics data:
jsx
// pages/api/analytics.js
export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method not allowed' });
  }
  
  const data = req.body;
  
  // Here you would typically:
  // 1. Validate the data
  // 2. Store it in a database
  // 3. Or forward it to an analytics service
  
  // Example: store in your database
  try {
    // Replace with your database logic
    // await db.collection('analytics').insertOne(data);
    console.log('Analytics received:', data);
    
    res.status(200).json({ success: true });
  } catch (error) {
    console.error('Analytics error:', error);
    res.status(500).json({ error: 'Failed to store analytics data' });
  }
}
  1. Use your custom analytics hook in your app:
jsx
// pages/_app.js
import { useAnalytics } from '../hooks/useAnalytics';

function MyApp({ Component, pageProps }) {
  const { trackEvent } = useAnalytics();
  
  // Make trackEvent available throughout your app
  const enhancedProps = {
    ...pageProps,
    trackEvent,
  };
  
  return <Component {...enhancedProps} />;
}

export default MyApp;

Best Practices for Analytics in Next.js​

  1. Respect User Privacy:

    • Always comply with privacy regulations like GDPR and CCPA
    • Implement proper cookie consent mechanisms
    • Anonymize IP addresses when possible
    • Be transparent about what data you collect

  2. Optimize Performance:

    • Load analytics scripts asynchronously
    • Consider using the strategy prop when adding script tags
    • Use batch processing for multiple events rather than individual network requests
    jsx
    // Example of script with strategy
    import Script from 'next/script';

    export default function Layout({ children }) {
      return (
        <>
          <Script
            src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"
            strategy="afterInteractive"
          />
          {children}
        </>
      );
    }

  3. Focus on Meaningful Metrics:

    • Define key performance indicators (KPIs) that align with business goals
    • Track user journeys rather than just page views
    • Set up funnel analysis to identify drop-off points

  4. Consider Server-Side Analytics:

    • For sensitive or critical data, consider server-side tracking
    • This avoids issues with ad blockers and provides more reliable data

Summary​

Analytics plays a crucial role in understanding user behavior and improving your Next.js applications. In this guide, we've covered:

  • Built-in Next.js analytics features with Web Vitals reporting
  • Integrating with Google Analytics
  • Using Vercel Analytics for deployed applications
  • Implementing a custom analytics solution
  • Best practices for respecting user privacy and optimizing performance

By leveraging these tools and approaches, you can gain valuable insights into how users interact with your application and make data-driven decisions to enhance user experience and business outcomes.

Additional Resources​

Exercises​

  1. Set up Google Analytics in your Next.js application and track page views.
  2. Implement custom event tracking for button clicks or form submissions.
  3. Create a dashboard to visualize the Web Vitals metrics collected by Next.js.
  4. Build a custom analytics solution that stores data in a database of your choice.
  5. Implement a cookie consent banner that respects user privacy preferences for analytics tracking.

If you spot any mistakes on this website, please let me know at feedback@compilenrun.com. I’d greatly appreciate your feedback! :)