Implementing PostHog for Web Vitals and Analytics in a Next.js Application

TL;DR: This article details the implementation of PostHog for web vitals and analytics in a Next.js application, including the addition of web vitals tracking and a reverse proxy via /ingest rewrite. The changes involved modifying several files, including PostHogProvider.tsx, next.config.ts, and package.json.

The Problem

The initial problem was to integrate PostHog for web analytics and engagement metrics into the existing Next.js application. This involved setting up PostHog tracking, capturing web vitals, and ensuring proper page leave tracking.

What I Tried First

Initially, I focused on setting up PostHog tracking in the application. This involved installing the necessary packages, including posthog-js and posthog-js/react, and configuring the PostHog provider.

// package.json
"dependencies": {
  // ...
  "posthog-js": "^1.4.3",
  "posthog-js/react": "^1.4.3",
  // ...
}

The Implementation

To implement PostHog tracking, I created a PostHogProvider component that wraps the application:

// app/providers/PostHogProvider.tsx
'use client'

import posthog from 'posthog-js'
import { PostHogProvider as PHProvider } from 'posthog-js/react'
import { useEffect } from 'react'

export function PostHogProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    posthog.init('YOUR_POSTHOG_TOKEN', {
      // PostHog configuration
    })
  }, [])

  return <PHProvider client={posthog}>{children}</PHProvider>
}

To capture web vitals, I added the web-vitals package and modified the PostHogProvider to track web vitals:

// app/providers/PostHogProvider.tsx (continued)
import { onPerfEntry } from 'web-vitals'

useEffect(() => {
  if (typeof window !== 'undefined') {
    onPerfEntry((metric) => {
      posthog.capture('web_vital', {
        ...metric,
      })
    })
  }
}, [])

To set up a reverse proxy via /ingest rewrite, I modified the next.config.ts file:

// next.config.ts
const nextConfig = {
  // ...
  async rewrites() {
    return [
      {
        source: '/ingest',
        destination: 'https://ingest.posthog.com',
      },
    ]
  },
}

Key Takeaway

The key takeaway from this implementation is the importance of properly configuring PostHog tracking and capturing web vitals in a Next.js application. By using the web-vitals package and modifying the PostHogProvider component, we can effectively track web vitals and analytics in our application.

What's Next

Next, I plan to explore more advanced PostHog features, such as custom events and properties, to further enhance the analytics capabilities of the application. Additionally, I will investigate ways to optimize the performance of the application using the web vitals data captured by PostHog.

vibecoding #buildinpublic #posthog #nextjs #webvitals #analytics

---

Part of my Build in Public series — sharing the real process of building Building Ismerely KB from Playa del Carmen, México.

Repo: zaerohell/bienestar-integral-kb · 2026-07-04

#playadev #buildinpublic