DEV Community: Tejas Bhovad

Integrating PostHog with NextJS

Tejas Bhovad — Sat, 11 Jan 2025 14:22:48 +0000

PostHog is the best free (also open source) analytics platform out there, and NextJS is the most used web framework used according to State of JS survey 2024. Though Posthog has great docs, it might be difficult for any beginner to integrate posthog in their NextJS projects.

This blog encompasses how to add posthog analytics to NextJS 15 app router. Assuming you have setup a NextJS app, you’ll need to install the posthog-js package

npm install posthog-js
# OR
yarn add posthog-js
# OR
pnpm add posthog-js

Create a .env.local file and paste the given environment variables in it

NEXT_PUBLIC_POSTHOG_KEY=phc_XXX
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

add a posthog provider in src/providers directory

"use client";

import posthog from "posthog-js";
import { PostHogProvider } from "posthog-js/react";

if (typeof window !== "undefined") {
  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
    api_host: "/ingest",
    ui_host: "https://us.posthog.com",
    person_profiles: "always",
    capture_pageview: false,
    capture_pageleave: true,
  });
}
export function NextHogProvider({ children }) {
  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
}

Add a Page view component in src/components directory


"use client";

import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import { usePostHog } from "posthog-js/react";

export default function PostHogPageView() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const posthog = usePostHog();
  useEffect(() => {
    // Track pageviews
    if (pathname && posthog) {
      let url = window.origin + pathname;
      if (searchParams.toString()) {
        url = url + `?${searchParams.toString()}`;
      }
      posthog.capture("$pageview", {
        $current_url: url,
      });
    }
  }, [pathname, searchParams, posthog]);

  return null;
}

In the layout.js wrap auth provider around the body and add the PageView inside too.

    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <NextHogProvider>
          <Suspense fallback={null}>
            <PostHogPageView />
          </Suspense>
          {children}
        </NextHogProvider>
      </body>
    </html>

in the next.config.mjs

/** @type {import('next').NextConfig} */
// next.config.js

const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/ingest/:path*",
        destination: "https://app.posthog.com/:path*", // Proxy to PostHog cloud service
      },
    ];
  },
};

export default nextConfig;

This is done to prevent the request being blocked by client

We launched a game… and Reddit BROKE it

Tejas Bhovad — Thu, 02 Jan 2025 10:30:00 +0000

In the end of 2024 we built cohesion, a game that allows you to create custom connections games, as part of SvelteHack. We wanted to launch this project fr this time, unlike our other projects with 0 users

We decided to launch on multiple subreddits, and it did work we got 300 visitors on the first day racking in over 200 upvotes on the posts. But there was a catch, we hit our Upstash limit of 10k commands, and we were down for over two hours.

Our primary database was Redis and which we used for Auth and as a database for games. On our home page we rendered title and the plays and for this to work we needed to fetch all the games, causing every game to fetch.
After the outage we faced, we worked on a more optimised approach to fetching data using sorted sets, we created a set with plays as key and object of title and id as value. The optimisations worked!(hopefully), we haven't gotten as many users as we did on the first day, but at least the commands usage has reduced significantly.

We are releasing Cohesion on Product Hunt today and I hope this will allow us to see our optimisations in action. Which btw you can upvote on:
https://www.producthunt.com/posts/cohesion-game

We aim with this launch was to get a community going for our game which we think is doable in the near future. Until then we will keep shipping new updates.

NextJS Docker Starter

Tejas Bhovad — Wed, 11 Sep 2024 17:26:43 +0000

Created an GitHub repo with a preset docker image with ~450 mb for both developing locally and also testing it locally

TejasBhovad/docker-next

To setup the env is really simple just run make up for development server and make prod for production build

Neon Starter Todo

Tejas Bhovad — Thu, 29 Aug 2024 12:14:03 +0000

This is a submission for the Neon Open Source Starter Kit Challenge : Ultimate Starter Kit

My Kit

Simple and Blazingly fast todo list built using DrizzleORM, Postgres, and NextJS, with authentication implemented using AuthJS(formerly known as NextAuth).

Link to Kit

The repository with the starter can be found on
https://github.com/TejasBhovad/pretty-quick

Your Journey

I created this project when I was first learning to use DrizzleORM and NeonTech's Postgres, I revamped it and added better instructions to create it into a starter kit. Its also the fastest web app I have made but keep in mind the vercel functions are from India(so maybe slow in other countries)