Next.js

PostHog makes it easy to get data about traffic and usage of your Next.js app. Integrating PostHog into your site enables analytics about user behavior, custom events capture, session recordings, feature flags, and more.

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

Prerequisites

To follow this tutorial along, you need:

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

Setup and tracking page views (automatically)

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

Terminal

yarn add posthog-js

Terminal

npm install --save posthog-js

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

JSX

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

if (typeof window !== "undefined") {
  // This ensures that as long as we are client-side, posthog is always ready
  // NOTE: If set as an environment variable be sure to prefix with `NEXT_PUBLIC_`
  // For more info see https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser

  posthog.init('<ph_project_api_key>', { api_host: '<ph_instance_address>' });
}

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

  useEffect(() => {
    // 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;

Disable in development

TSX

import posthog from 'posthog-js';

if (typeof window !== "undefined") {
  // This ensures that as long as we are client-side, posthog is always ready
  posthog.init('<ph_project_api_key>', { 
    api_host: '<ph_instance_address>', 
    loaded: (posthog) => {
      if (process.env.NODE_ENV === 'development') posthog.opt_out_capturing()
    },
  });
}

Tracking custom events

Now that PostHog is setup and initialized PostHog, you can use it to capture events where you want to track user behavior. For example, if you want to track when a user clicks a button, you can do it like this:

JSX

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

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

Prerequisites

Setup and tracking page views (automatically)

Disable in development

Tracking custom events

Further reading

Questions?

Was this page useful?

Nuxt.js