PostHog · wizard-ci-bot · Jan 14, 2026
diff --git a/apps/next-js/15-app-router-saas/app/(dashboard)/dashboard/general/page.tsx b/apps/next-js/15-app-router-saas/app/(dashboard)/dashboard/general/page.tsx
@@ -10,6 +10,7 @@ import { updateAccount } from '@/app/(login)/actions';
 import { User } from '@/lib/db/schema';
 import useSWR from 'swr';
 import { Suspense } from 'react';
+import posthog from 'posthog-js';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
@@ -89,7 +90,13 @@ export default function GeneralPage() {
           <CardTitle>Account Information</CardTitle>
         </CardHeader>
         <CardContent>
-          <form className="space-y-4" action={formAction}>
+          <form
+            className="space-y-4"
+            action={formAction}
+            onSubmit={() => {
+              posthog.capture('account_updated');
+            }}
+          >
             <Suspense fallback={<AccountForm state={state} />}>
               <AccountFormWithData state={state} />
             </Suspense>

diff --git a/apps/next-js/15-app-router-saas/app/(dashboard)/dashboard/page.tsx b/apps/next-js/15-app-router-saas/app/(dashboard)/dashboard/page.tsx
@@ -19,6 +19,7 @@ import { Input } from '@/components/ui/input';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Label } from '@/components/ui/label';
 import { Loader2, PlusCircle } from 'lucide-react';
+import posthog from 'posthog-js';
 
 type ActionState = {
   error?: string;
@@ -60,7 +61,15 @@ function ManageSubscription() {
                   : 'No active subscription'}
               </p>
             </div>
-            <form action={customerPortalAction}>
+            <form
+              action={customerPortalAction}
+              onSubmit={() => {
+                posthog.capture('subscription_managed', {
+                  plan_name: teamData?.planName,
+                  subscription_status: teamData?.subscriptionStatus,
+                });
+              }}
+            >
               <Button type="submit" variant="outline">
                 Manage Subscription
               </Button>
@@ -154,7 +163,15 @@ function TeamMembers() {
                 </div>
               </div>
               {index > 1 ? (
-                <form action={removeAction}>
+                <form
+                  action={removeAction}
+                  onSubmit={() => {
+                    posthog.capture('team_member_removed', {
+                      member_id: member.id,
+                      member_role: member.role,
+                    });
+                  }}
+                >
                   <input type="hidden" name="memberId" value={member.id} />
                   <Button
                     type="submit"
@@ -201,7 +218,19 @@ function InviteTeamMember() {
         <CardTitle>Invite Team Member</CardTitle>
       </CardHeader>
       <CardContent>
-        <form action={inviteAction} className="space-y-4">
+        <form
+          action={inviteAction}
+          className="space-y-4"
+          onSubmit={(e) => {
+            const formData = new FormData(e.currentTarget);
+            const email = formData.get('email') as string;
+            const role = formData.get('role') as string;
+            posthog.capture('team_member_invited', {
+              invited_email: email,
+              invited_role: role,
+            });
+          }}
+        >
           <div>
             <Label htmlFor="email" className="mb-2">
               Email

diff --git a/apps/next-js/15-app-router-saas/app/(dashboard)/dashboard/security/page.tsx b/apps/next-js/15-app-router-saas/app/(dashboard)/dashboard/security/page.tsx
@@ -7,6 +7,7 @@ import { Label } from '@/components/ui/label';
 import { Lock, Trash2, Loader2 } from 'lucide-react';
 import { useActionState } from 'react';
 import { updatePassword, deleteAccount } from '@/app/(login)/actions';
+import posthog from 'posthog-js';
 
 type PasswordState = {
   currentPassword?: string;
@@ -43,7 +44,13 @@ export default function SecurityPage() {
           <CardTitle>Password</CardTitle>
         </CardHeader>
         <CardContent>
-          <form className="space-y-4" action={passwordAction}>
+          <form
+            className="space-y-4"
+            action={passwordAction}
+            onSubmit={() => {
+              posthog.capture('password_update_submitted');
+            }}
+          >
             <div>
               <Label htmlFor="current-password" className="mb-2">
                 Current Password
@@ -123,7 +130,13 @@ export default function SecurityPage() {
           <p className="text-sm text-gray-500 mb-4">
             Account deletion is non-reversable. Please proceed with caution.
           </p>
-          <form action={deleteAction} className="space-y-4">
+          <form
+            action={deleteAction}
+            className="space-y-4"
+            onSubmit={() => {
+              posthog.capture('account_deletion_submitted');
+            }}
+          >
             <div>
               <Label htmlFor="delete-password" className="mb-2">
                 Confirm Password

diff --git a/apps/next-js/15-app-router-saas/app/(dashboard)/layout.tsx b/apps/next-js/15-app-router-saas/app/(dashboard)/layout.tsx
@@ -15,6 +15,7 @@ import { signOut } from '@/app/(login)/actions';
 import { useRouter } from 'next/navigation';
 import { User } from '@/lib/db/schema';
 import useSWR, { mutate } from 'swr';
+import posthog from 'posthog-js';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
@@ -24,6 +25,8 @@ function UserMenu() {
   const router = useRouter();
 
   async function handleSignOut() {
+    posthog.capture('sign_out_clicked');
+    posthog.reset();
     await signOut();
     mutate('/api/user');
     router.push('/');

diff --git a/apps/next-js/15-app-router-saas/app/(dashboard)/pricing/submit-button.tsx b/apps/next-js/15-app-router-saas/app/(dashboard)/pricing/submit-button.tsx
@@ -3,16 +3,22 @@
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Loader2 } from 'lucide-react';
 import { useFormStatus } from 'react-dom';
+import posthog from 'posthog-js';
 
 export function SubmitButton() {
   const { pending } = useFormStatus();
 
+  const handleClick = () => {
+    posthog.capture('checkout_started');
+  };
+
   return (
     <Button
       type="submit"
       disabled={pending}
       variant="outline"
       className="w-full rounded-full"
+      onClick={handleClick}
     >
       {pending ? (
         <>

diff --git a/apps/next-js/15-app-router-saas/app/(login)/login.tsx b/apps/next-js/15-app-router-saas/app/(login)/login.tsx
@@ -9,6 +9,7 @@ import { Label } from '@/components/ui/label';
 import { CircleIcon, Loader2 } from 'lucide-react';
 import { signIn, signUp } from './actions';
 import { ActionState } from '@/lib/auth/middleware';
+import posthog from 'posthog-js';
 
 export function Login({ mode = 'signin' }: { mode?: 'signin' | 'signup' }) {
   const searchParams = useSearchParams();
@@ -34,7 +35,21 @@ export function Login({ mode = 'signin' }: { mode?: 'signin' | 'signup' }) {
       </div>
 
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <form className="space-y-6" action={formAction}>
+        <form
+          className="space-y-6"
+          action={formAction}
+          onSubmit={(e) => {
+            const formData = new FormData(e.currentTarget);
+            const email = formData.get('email') as string;
+            if (mode === 'signin') {
+              posthog.capture('sign_in_submitted', { email });
+              posthog.identify(email, { email });
+            } else {
+              posthog.capture('sign_up_submitted', { email });
+              posthog.identify(email, { email });
+            }
+          }}
+        >
           <input type="hidden" name="redirect" value={redirect || ''} />
           <input type="hidden" name="priceId" value={priceId || ''} />
           <input type="hidden" name="inviteId" value={inviteId || ''} />

diff --git a/apps/next-js/15-app-router-saas/instrumentation-client.ts b/apps/next-js/15-app-router-saas/instrumentation-client.ts
@@ -0,0 +1,9 @@
+import posthog from 'posthog-js';
+
+posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+  api_host: '/ingest',
+  ui_host: 'https://us.posthog.com',
+  defaults: '2025-05-24',
+  capture_exceptions: true,
+  debug: process.env.NODE_ENV === 'development',
+});
diff --git a/apps/next-js/15-app-router-saas/lib/posthog-server.ts b/apps/next-js/15-app-router-saas/lib/posthog-server.ts
@@ -0,0 +1,20 @@
+import { PostHog } from 'posthog-node';
+
+let posthogClient: PostHog | null = null;
+
+export function getPostHogClient() {
+  if (!posthogClient) {
+    posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+      host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+      flushAt: 1,
+      flushInterval: 0,
+    });
+  }
+  return posthogClient;
+}
+
+export async function shutdownPostHog() {
+  if (posthogClient) {
+    await posthogClient.shutdown();
+  }
+}
diff --git a/apps/next-js/15-app-router-saas/next.config.ts b/apps/next-js/15-app-router-saas/next.config.ts
@@ -4,6 +4,19 @@ const nextConfig: NextConfig = {
   // Configuration for stable Next.js 15
   // To enable experimental features like PPR, upgrade to canary:
   // pnpm add next@canary
+  async rewrites() {
+    return [
+      {
+        source: '/ingest/static/:path*',
+        destination: 'https://us-assets.i.posthog.com/static/:path*',
+      },
+      {
+        source: '/ingest/:path*',
+        destination: 'https://us.i.posthog.com/:path*',
+      },
+    ];
+  },
+  skipTrailingSlashRedirect: true,
 };
 
 export default nextConfig;
diff --git a/apps/next-js/15-app-router-saas/package.json b/apps/next-js/15-app-router-saas/package.json
@@ -27,6 +27,8 @@
     "next": "15.5.7",
     "postcss": "^8.5.3",
     "postgres": "^3.4.5",
+    "posthog-js": "^1.321.2",
+    "posthog-node": "^5.21.0",
     "radix-ui": "^1.4.2",
     "react": "19.1.2",
     "react-dom": "19.1.2",