Using the PostHog Analytics Provider in Next.js Supabase Turbo

Learn how to use the PostHog Analytics provider in Next.js Supabase Turbo

The Posthog provider in Next.js Supabase Turbo is a simple way to integrate PostHog Analytics into your Next.js application using the Makerkit's Analytics package.

How to use the PostHog Analytics provider in Next.js Supabase Turbo

Learn how to use the PostHog Analytics provider in Next.js Supabase Turbo

Installation

Configuration

Installation

First, you need to pull the @kit/analytics package into your project using the CLI

bash

npx @makerkit/cli@latest plugins install

When prompted, select the PostHog package from the list of available packages. Once the command completes, you should see the packages/plugins/posthog directory in your project.

You can now import this package into your project:

bash

pnpm add "@kit/posthog@workspace:*" --filter "@kit/analytics" -D

Client Side

You can now use the PostHog plugin in the Analytics package. Update the packages/analytics/src/index.ts file as follows:

packages/analytics/src/index.ts

import { createPostHogAnalyticsService } from '@kit/posthog/client';
import { createAnalyticsManager } from './analytics-manager';
import type { AnalyticsManager } from './types';
export const analytics: AnalyticsManager = createAnalyticsManager({
 providers: {
   posthog: createPostHogAnalyticsService,
 },
});

For client side usage, please use the analytics object from the @kit/analytics package.

tsx

import { analytics } from '@kit/analytics';

Server Side

You can now use the PostHog plugin in the Analytics package. Update the packages/analytics/src/server.ts file as follows:

packages/analytics/src/server.ts

import { createPostHogAnalyticsService } from '@kit/posthog/server';
import { createAnalyticsManager } from './analytics-manager';
import type { AnalyticsManager } from './types';
export const analytics: AnalyticsManager = createAnalyticsManager({
 providers: {
   posthog: createPostHogAnalyticsService,
 },
});

For server side usage, please use the analytics object from the @kit/analytics package.

tsx

import { analytics } from '@kit/analytics/server';

Configuration

Please add the following environment variables to your .env file:

bash

NEXT_PUBLIC_POSTHOG_KEY=phc_your_key_here
NEXT_PUBLIC_POSTHOG_HOST=https://eu.posthog.com

Optionally, add the Ingestion Rewrite for bypassing Blockers:

text

NEXT_PUBLIC_POSTHOG_INGESTION_URL=http://localhost:3000/ingest

Ingestion Rewrites

In your apps/web/next.config.mjs file, add the following config:

apps/web/next.config.mjs

/** @type {import('next').NextConfig} */
const config = {
 // ...other config
 // This is required to support PostHog trailing slash API requests
 skipTrailingSlashRedirect: true,
 async rewrites() {
   // NOTE: change `eu` to `us` if applicable
   return [
     {
       source: '/ingest/static/:path*',
       destination: 'https://eu-assets.i.posthog.com/static/:path*'
     },
     {
       source: '/ingest/:path*',
       destination: 'https://eu.i.posthog.com/:path*'
     }
   ];
 }
}

CSRF Exclusion

In your apps/web/middleware.ts file, exclude the PostHog ingestion URL from CSRF protection:

apps/web/middleware.ts

export const config = {
 matcher: ['/((?!_next/static|_next/image|images|locales|assets|ingest/*|api/*).*)'],
};