Tracking Next.js apps

Last updated: Sep 07, 2022

If you are using Next.js and want to track your application using PostHog this tutorial might help you out.

It will guide you through an example integration of PostHog using Next.js and the posthog-js library.

Is this tutorial for me?

This tutorial is aimed at Next.js users. We are going to look at some minimal example code which should get you started quickly.

Prerequisites

To follow this tutorial along, you need to:

Have a self-hosted instance of PostHog or use PostHog Cloud.
Have a running Next.js application

Setup and tracking page views (automatically)

The first thing you want to do is to install the next-use-posthog library in your project - so add it using your package manager:

yarn add next-use-posthog

npm install --save next-use-posthog

After that, we want to initialize the PostHog instance in pages/_app.js

import { usePostHog } from 'next-use-posthog'

function MyApp({ Component, pageProps }) {
  usePostHog('YOUR_API_KEY', { api_host: 'https://app.posthog.com' })

  return <Component {...pageProps} />
}

export default MyApp

Disable in development

import { usePostHog } from 'next-use-posthog'

function MyApp({ Component, pageProps }) {
  usePostHog('YOUR_API_KEY', {
    api_host: 'https://app.posthog.com',
    loaded: (posthog) => {
      if (process.env.NODE_ENV === 'development') posthog.opt_out_capturing()
    },
  })  

  return <Component {...pageProps} />
}

export default MyApp

Setup and tracking page views (manually)

The first thing you want to do is to install the posthog-js library in your project - so add it using your package manager:

yarn add posthog-js

npm install --save posthog-js

After that, we want to initialize the PostHog instance in pages/_app.js

import { useRouter } from 'next/router';
import posthog from 'posthog-js';
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    // Init PostHog
    posthog.init('YOUR_API_KEY', { api_host: 'https://app.posthog.com' });

    // Track page views
    const handleRouteChange = () => posthog.capture('$pageview');
    router.events.on('routeChangeComplete', handleRouteChange);

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

Tracking custom events

const handleOnBuy = () => {
  posthog.capture('purchase', { price: 5900, currency: 'USD' });
};

return (
  <main>
    <h1>Store</h1>
    <button onClick={handleOnBuy}>Buy</button>
  </main>
);

Questions?

Was this page useful?

Tracking Nuxt.js apps

If you are using Nuxt.js and want to track your application using PostHog this tutorial might help you out. It will guide you through an example integration of PostHog using Nuxt.js. Is this tutorial for me? This tutorial is aimed at Nuxt.js users which run Nuxt in spa or universal mode. We are going to look at some minimal example code which should get you started quickly and provide a base for further customization. Prerequisites To follow this tutorial along, you need to: Have…