• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
    • Analytics and Events
    • Google Analytics
    • PostHog
    • Umami
    • Custom Analytics Provider

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

1

Installation

2

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/*).*)'],
};
On this page
  1. Installation
    1. Client Side
    2. Server Side
  2. Configuration
    1. Ingestion Rewrites
    2. CSRF Exclusion