mcpField
I
integration-nextjs-app-router

integration-nextjs-app-router

github.com/posthog開発76284 回インストール今日更新
リポジトリ

integration-nextjs-app-router について

Next.js App Router アプリに PostHog の分析機能を追加する開発スキルです。手順に沿ったセットアップと参考資料を示し、環境変数の使用と既存コードへの最小限の変更を重視します。

主な機能

  1. 01段階的な統合ワークフロー
  2. 02Next.js App Router の設定ガイド
  3. 03ユーザー識別とイベント収集の指針
  4. 04エラートラッキングの導入指針
  5. 05参考例とドキュメント一覧

活用シーン

  1. 01Next.js アプリへの PostHog 導入
  2. 02ログイン・登録時のユーザー識別
  3. 03重要な処理へのエラートラッキング追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/posthog/skills --skill integration-nextjs-app-router

インストール後、Claude Code で/integration-nextjs-app-routerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
basic-integration-1.0-begin.md
basic-integration-1.1-edit.md
basic-integration-1.2-revise.md
basic-integration-1.3-conclude.md
EXAMPLE.md
identify-users.md
next-js.md

詳細

Next.js App Router 向け PostHog 統合

このスキルでは、Next.js App Router アプリケーションに PostHog のアナリティクスを追加できます。

ワークフロー

統合を完了するには、以下の手順を順番に実行してください。

  1. basic-integration-1.0-begin.md - PostHog のセットアップ - 開始 ← ここから開始
  2. basic-integration-1.1-edit.md - PostHog のセットアップ - 編集
  3. basic-integration-1.2-revise.md - PostHog のセットアップ - 修正
  4. basic-integration-1.3-conclude.md - PostHog のセットアップ - 完了

リファレンスファイル

  • references/EXAMPLE.md - Next.js App Router のサンプルプロジェクトコード
  • references/next-js.md - Next.js - ドキュメント
  • references/identify-users.md - ユーザーの識別 - ドキュメント
  • references/basic-integration-1.0-begin.md - PostHog のセットアップ - 開始
  • references/basic-integration-1.1-edit.md - PostHog のセットアップ - 編集
  • references/basic-integration-1.2-revise.md - PostHog のセットアップ - 修正
  • references/basic-integration-1.3-conclude.md - PostHog のセットアップ - 完了

サンプルプロジェクトでは、目標とする実装パターンを示しています。API の詳細については、ドキュメントを参照してください。

重要な原則

  • 環境変数：PostHog のキーには必ず環境変数を使用してください。ハードコードしないでください。
  • 変更は最小限に：既存の統合に PostHog のコードを追加してください。既存のコードを置き換えたり、構成し直したりしないでください。
  • サンプルに合わせる：実装は、できるだけサンプルプロジェクトのパターンに従ってください。

フレームワークのガイドライン

  • Next.js 15.3 以降では、最も簡単にセットアップできる instrumentation-client.ts で PostHog を初期化してください
  • フィーチャーフラグには useFeatureFlagEnabled() または useFeatureFlagPayload() フックを使用してください。これらのフックは読み込み状態と外部同期を自動的に処理します
  • アナリティクスのキャプチャは、状態の変更に反応する useEffect ではなく、ユーザー操作が発生するイベントハンドラーに追加してください
  • データ変換に useEffect を使用しないでください。代わりに、レンダリング中に派生値を計算してください
  • ユーザーイベントに応答するために useEffect を使用しないでください。そのロジックはイベントハンドラー自体に記述してください
  • 状態更新を連鎖させるために useEffect を使用しないでください。関連する更新はすべてイベントハンドラー内でまとめて計算してください
  • 親コンポーネントへの通知に useEffect を使用しないでください。イベントハンドラー内で setState と同時に親のコールバックを呼び出してください
  • プロパティが変わったときにコンポーネントの状態をリセットするには、useEffect を使う代わりに、そのプロパティをコンポーネントの key として渡してください
  • useEffect は外部システム（React 以外のウィジェット、ブラウザー API、ネットワークのサブスクリプション）との同期にのみ使用してください

ユーザーの識別

ログインおよびサインアップのイベント中にユーザーを識別してください。このフレームワークに適した識別パターンについては、サンプルコードとドキュメントを参照してください。フロントエンドとバックエンドの両方のコードがある場合は、相関を維持するため、クライアント側のセッションと distinct ID を X-POSTHOG-DISTINCT-ID および X-POSTHOG-SESSION-ID ヘッダーで渡してください。

エラートラッキング

特に重要なユーザーフローや API の境界を中心に、関連ファイルに PostHog のエラートラッキングを追加してください。

コメント

Markdown 対応