next-use-posthog

This is now deprecated

We now offer a PostHog provider and hooks which makes setup easier and more reliable.

We recommend using the approach outlined in our documentation

---

Old notes

V2.0 breaking changes

In v2.0.0 we moved PostHog to be a peer dependency so you can control which version of PostHog you use without needing changes to this integration.

Install

yarn add next-use-posthog

Usage

In pages/_app.js or pages/_app.tsx

JavaScript

import { usePostHog } from "next-use-posthog";

const App = ({ Component, pageProps }) => {
  usePostHog("API_KEY", {
    api_host: "https://app.posthog.com",
  });

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

export default App;

TypeScript

import { usePostHog } from "next-use-posthog";
import { AppProps } from "next/app";
import { FC } from "react";

const App: FC<AppProps> = ({ Component, pageProps }) => {
  usePostHog("API_KEY", {
    api_host: "https://app.posthog.com",
  });

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

export default App;

Disable in development

import { usePostHog } from "next-use-posthog";
import { AppProps } from "next/app";
import { FC } from "react";

const App: FC<AppProps> = ({ Component, pageProps }) => {
  usePostHog("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 App;

Dependencies

• React
• Next.js
• posthog-js