Why Do We Love PostHog and How to Connect it to A Next.js Project

Tutorial
Web Development
Blog
Studiofru
Studiofru
Cover Image for Why Do We Love PostHog and How to Connect it to A Next.js Project

PostHog is a platform to analyze product analytics, feature flags, session recordings, heatmaps and feedbacks. In short, it is a tool which helps website owner to understand their users in a more detail insights. With PostHog, we can see our site users’ flow through session recording, we can learn the location of our site users, we can learn the technology that they are using when accessing our sites and we can better understand our site users through feedbacks. 

We can always create insights and arrange them based on our needs. The platform is very easy to use and maintain. So far we haven’t found any hurdle in using it. 

What More is There to Love the Platform?

Well, PostHog is free until we hit the limit of about a million events per month, then we need to pay $0.0003100 if we are hitting for more than a million events. A good reasonable price for newbies. 

Within our months of experience using the tool, it is a good combination to use it together with Google Analytics. 

How to Implement it to A  Next.js Project?

Have we mentioned that we are using PostHog for the most of our websites? Well, the truth is yes we are using it for many of our websites. Because once again, it is free for beginners and very easy to use. 

According to the documentation written on their website, PostHog offer some methods which can be applied to a Next.js project. But we just usually use the easy way throught useEffect to capture all of the events that are happening in our websites. 

First of course we need to install the library. This can be done by installing the code below on the terminal

npm i posthog-js

Then just use the useEffect on the /app.js. Below is the specific code to implement it:

import React, { useEffect } from 'react'
import Smartlook from 'smartlook-client'

function MyApp({ Component, pageProps }) {

  useEffect(() => {
    posthog.init('Your Project API Key', { api_host: 'https://app.posthog.com' })
    posthog.capture('my event', { property: 'value' })
  }, [])

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

}

export default MyApp 

External Link
Click here

Share this article