diff --git a/e2e-tests/test-applications/nextjs-app-router-test-app/src/app/example/page.tsx b/e2e-tests/test-applications/nextjs-app-router-test-app/src/app/example/page.tsx new file mode 100644 index 00000000..d14b5c68 --- /dev/null +++ b/e2e-tests/test-applications/nextjs-app-router-test-app/src/app/example/page.tsx @@ -0,0 +1,90 @@ +import Image from 'next/image'; +import Link from 'next/link'; + +export default function ExamplePage() { + return ( +
+
+ Next.js logo +
    +
  1. + Go to the home page. +
    2. +
+ +
+ + Vercel logomark + Deploy now + + + Read our docs + +
+
+ +
+ ); +} diff --git a/e2e-tests/test-applications/nextjs-app-router-test-app/src/app/page.tsx b/e2e-tests/test-applications/nextjs-app-router-test-app/src/app/page.tsx index f282fb5c..a7e312d5 100644 --- a/e2e-tests/test-applications/nextjs-app-router-test-app/src/app/page.tsx +++ b/e2e-tests/test-applications/nextjs-app-router-test-app/src/app/page.tsx @@ -1,4 +1,5 @@ -import Image from "next/image"; +import Image from 'next/image'; +import Link from 'next/link'; export default function Home() { return ( @@ -13,9 +14,8 @@ export default function Home() { />
  1. - Get started by editing src/app/page.tsx. + Go to the example page.
    2. -
  2. Save and see your changes instantly.
diff --git a/e2e-tests/test-applications/nextjs-instrumentation-client-test-app/src/app/example/page.tsx b/e2e-tests/test-applications/nextjs-instrumentation-client-test-app/src/app/example/page.tsx new file mode 100644 index 00000000..b0c7274a --- /dev/null +++ b/e2e-tests/test-applications/nextjs-instrumentation-client-test-app/src/app/example/page.tsx @@ -0,0 +1,95 @@ +import Image from 'next/image'; +import styles from '../page.module.css'; +import Link from 'next/link'; + +export default function ExamplePage() { + return ( +
+
+ Next.js logo +
    +
  1. + Go to the home page. +
    2. +
+ +
+ + Vercel logomark + Deploy now + + + Read our docs + +
+
+ +
+ ); +} diff --git a/e2e-tests/test-applications/nextjs-instrumentation-client-test-app/src/app/page.tsx b/e2e-tests/test-applications/nextjs-instrumentation-client-test-app/src/app/page.tsx index 84af2cb0..57ba24d3 100644 --- a/e2e-tests/test-applications/nextjs-instrumentation-client-test-app/src/app/page.tsx +++ b/e2e-tests/test-applications/nextjs-instrumentation-client-test-app/src/app/page.tsx @@ -1,5 +1,6 @@ -import Image from "next/image"; -import styles from "./page.module.css"; +import Image from 'next/image'; +import styles from './page.module.css'; +import Link from 'next/link'; export default function Home() { return ( @@ -15,9 +16,8 @@ export default function Home() { />
  1. - Get started by editing src/app/page.tsx. + Go to the example page.
    2. -
  2. Save and see your changes instantly.
diff --git a/e2e-tests/test-applications/nextjs-pages-router-test-app/src/pages/example.tsx b/e2e-tests/test-applications/nextjs-pages-router-test-app/src/pages/example.tsx new file mode 100644 index 00000000..c68ee8f3 --- /dev/null +++ b/e2e-tests/test-applications/nextjs-pages-router-test-app/src/pages/example.tsx @@ -0,0 +1,99 @@ +import Image from 'next/image'; +import Link from 'next/link'; + +export default function ExamplePage() { + return ( +
+
+ Next.js logo +
    +
  1. + Go to the home page. +
    2. +
+ +
+ + Vercel logomark + Deploy now + + + Read our docs + +
+
+ +
+ ); +} diff --git a/e2e-tests/test-applications/nextjs-pages-router-test-app/src/pages/index.tsx b/e2e-tests/test-applications/nextjs-pages-router-test-app/src/pages/index.tsx index 2aff5806..872c1038 100644 --- a/e2e-tests/test-applications/nextjs-pages-router-test-app/src/pages/index.tsx +++ b/e2e-tests/test-applications/nextjs-pages-router-test-app/src/pages/index.tsx @@ -1,14 +1,15 @@ -import Image from "next/image"; -import { Geist, Geist_Mono } from "next/font/google"; +import Image from 'next/image'; +import { Geist, Geist_Mono } from 'next/font/google'; +import Link from 'next/link'; const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], + variable: '--font-geist-sans', + subsets: ['latin'], }); const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], + variable: '--font-geist-mono', + subsets: ['latin'], }); export default function Home() { @@ -27,13 +28,8 @@ export default function Home() { />
  1. - Get started by editing{" "} - - src/pages/index.tsx - - . + Go to the example page.
    2. -
  2. Save and see your changes instantly.
diff --git a/src/nextjs/docs.ts b/src/nextjs/docs.ts index 6f760c83..da12373b 100644 --- a/src/nextjs/docs.ts +++ b/src/nextjs/docs.ts @@ -31,8 +31,7 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) { posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, { api_host: "/ingest", ui_host: "${getUiHostFromHost(host)}", - capture_pageview: 'history_change', - capture_pageleave: true, // Enable pageleave capture + defaults: '2025-05-24', capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this debug: process.env.NODE_ENV === "development", }) @@ -40,7 +39,6 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) { return ( - {children} ) @@ -85,10 +83,10 @@ Example: -------------------------------------------------- import { PostHog } from "posthog-node" +// NOTE: This is a Node.js client, so you can use it for sending events from the server side to PostHog. export default function PostHogClient() { const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, { host: process.env.NEXT_PUBLIC_POSTHOG_HOST, - capture_pageview: 'history_change', flushAt: 1, flushInterval: 0, }) @@ -162,11 +160,8 @@ export default function App({ Component, pageProps }) { posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, { api_host: "/ingest", ui_host: "${getUiHostFromHost(host)}", - capture_pageview: 'history_change', + defaults: '2025-05-24', capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this - loaded: (posthog) => { - if (process.env.NODE_ENV === "development") posthog.debug() - }, debug: process.env.NODE_ENV === "development", }) }, []) @@ -190,10 +185,10 @@ Example: -------------------------------------------------- import { PostHog } from "posthog-node" +// NOTE: This is a Node.js client, so you can use it for sending events from the server side to PostHog. export default function PostHogClient() { const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, { host: process.env.NEXT_PUBLIC_POSTHOG_HOST, - capture_pageview: 'history_change', flushAt: 1, flushInterval: 0, }) @@ -266,8 +261,7 @@ import posthog from "posthog-js" posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, { api_host: "/ingest", ui_host: "${getUiHostFromHost(host)}", - capture_pageview: 'history_change', - capture_pageleave: true, // Enable pageleave capture + defaults: '2025-05-24', capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this debug: process.env.NODE_ENV === "development", }); diff --git a/src/react/docs.ts b/src/react/docs.ts index 90544790..792c2bb6 100644 --- a/src/react/docs.ts +++ b/src/react/docs.ts @@ -41,6 +41,7 @@ root.render( apiKey={${apiKeyText}} options={{ api_host: ${hostText}, + defaults: '2025-05-24', capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this debug: ${ envVarPrefix === 'VITE_PUBLIC_'