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.
Installation
First, you need to pull the @kit/analytics package into your project using the CLI
npx @makerkit/cli@latest plugins installWhen 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:
pnpm add "@kit/posthog@workspace:*" --filter "@kit/analytics" -DYou can now use the Google Analytics plugin in the Analytics package. Update the packages/analytics/src/index.ts file as follows:
import { createPostHogAnalyticsService } from '@kit/posthog';
import { createAnalyticsManager } from './analytics-manager';
import type { AnalyticsManager } from './types';
export const analytics: AnalyticsManager = createAnalyticsManager({
providers: {
posthog: createPostHogAnalyticsService,
},
});Configuration
Please add the following environment variables to your .env file:
NEXT_PUBLIC_POSTHOG_KEY=your-project-key
NEXT_PUBLIC_POSTHOG_HOST=your-host
NEXT_PUBLIC_POSTHOG_INGESTION_URL=your-ingestion-urlIngestion Rewrites
In your apps/web/next.config.mjs file, add the following config:
/** @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:
export const config = {
matcher: ['/((?!_next/static|_next/image|images|locales|assets|ingest/*|api/*).*)'],
};