Next.js 15向け本番グレードのPostHog統合
フリーのプロンプト百科事典 Wikiprompt より
2026年1月23日
Next.js 15向け本番グレードのPostHog統合 Next.js 15のSaaSアプリ（Supabase認証、Polar課金）にPostHogアナリティクス、セッションリプレイ、フィーチャーフラグ、エラートラッキングを統合するための、シニアNext.jsアーキテクト向けの包括的なシステムプロンプト。
プロンプト内容保存
🌐
{
"package.json": {
"dependencies": {
"posthog-js": "^1.200.0"
}
},
"app/providers.tsx": `'use client';
import { PostHogProvider } from 'posthog-js/react';
import posthog from 'posthog-js';
import { Suspense, useEffect } from 'react';
import PostHogPageView from '@/components/PostHogPageView';
import useAnalyticsAuth from '@/hooks/useAnalyticsAuth';
if (typeof window !== 'undefined') {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',
capture_pageview: false,
capture_pageleave: true,
mask_all_text_inputs: true,
});
}
export function Providers({ children }: { children: React.ReactNode }) {
useAnalyticsAuth();
return (
<PostHogProvider client={posthog}>
<Suspense fallback={null}>
<PostHogPageView />
</Suspense>
{children}
</PostHogProvider>
);
}`,
"lib/analytics.ts": `import posthog from 'posthog-js';
export enum AnalyticsEvents {
CHECKOUT_STARTED = 'CHECKOUT_STARTED',
SUBSCRIPTION_CREATED = 'SUBSCRIPTION_CREATED',
EXCEPTION = '$exception',
}
type TrackEventProperties = {
[AnalyticsEvents.CHECKOUT_STARTED]: {
plan: string;
price: number;
currency: string;
};
[AnalyticsEvents.SUBSCRIPTION_CREATED]: {
revenue: number;
currency: string;
plan: string;
};
[AnalyticsEvents.EXCEPTION]: {
message: string;
stack?: string;
};
};
export function trackEvent<K extends AnalyticsEvents>(
event: K,
properties?: TrackEventProperties[K]
) {
if (typeof window === 'undefined') return;
posthog.capture(event, properties);
}
export function setUserProperty(key: string, value: string | number | boolean) {
if (typeof window === 'undefined') return;
posthog.setPersonProperties({ [key]: value });
}
export function captureError(error: Error) {
trackEvent(AnalyticsEvents.EXCEPTION, {
message: error.message,
stack: error.stack,
});
}`,
"hooks/useAnalyticsAuth.ts": `'use client';
import { useEffect } from 'react';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import posthog from 'posthog-js';
import { setUserProperty } from '@/lib/analytics';
export default function useAnalyticsAuth() {
const supabase = createClientComponentClient();
useEffect(() => {
const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
if (event === 'SIGNED_IN' && session?.user) {
posthog.identify(session.user.id);
setUserProperty('polar_customer_id', session.user.user_metadata?.polar_customer_id || '');
}
if (event === 'SIGNED_OUT') {
posthog.reset();
}
});
return () => subscription.unsubscribe();
}, [supabase]);
}`,
"components/PostHogPageView.tsx": `'use client';
import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect, useRef } from 'react';
import posthog from 'posthog-js';
export default function PostHogPageView() {
const pathname = usePathname();
const searchParams = useSearchParams();
const lastTrackedPath = useRef<string | null>(null);
useEffect(() => {
const url = pathname + (searchParams?.toString() ? \`?\${searchParams.toString()}\` : '');
if (lastTrackedPath.current !== url) {
posthog.capture('$pageview', { path: url });
lastTrackedPath.current = url;
}
}, [pathname, searchParams]);
return null;
}`,
"app/layout.tsx": `import { Providers } from './providers';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}`
}
ログインして完全なプロンプトを表示
次で続行:
ログインすると、次に同意したことになります： 利用規約 と プライバシーポリシー
使い方
このプロンプトは coding 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。
最良の結果を得るには、プレースホルダー（角括弧や大文字で示された部分）を具体的な要件に置き換えてください。
ノート
0 件のコメント