Analytics for Next.js apps with PostHog

yarn add next-use-posthog

npm install --save next-use-posthog

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

function MyApp({ Component, pageProps }) {  
  // 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
  
  usePostHog('<ph_project_api_key>', { api_host: '<ph_instance_address>' })

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

export default MyApp

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

function MyApp({ Component, pageProps }) {
  usePostHog('<ph_project_api_key>', {
    api_host: '<ph_instance_address>',
    loaded: (posthog) => {
      if (process.env.NODE_ENV === 'development') posthog.opt_out_capturing()
    },
  })  

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

export default MyApp

yarn add posthog-js

npm install --save posthog-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('<ph_project_api_key>', { api_host: '<ph_instance_address>' });

    // 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;

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

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