TOF-438: Fix broken code snippets on Next.js integration page - #171
TOF-438: Fix broken code snippets on Next.js integration page#171tylergoerzen-mxp with Copilot wants to merge 3 commits into
Conversation
Co-authored-by: tylergoerzen-mxp <259741734+tylergoerzen-mxp@users.noreply.github.com>
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
Confidence Score: 4/5The PR is not safe to merge until the Pages Router snippet retains exactly one page-view event for client-side navigation. Removing the route-change listener resolves duplicate events, but Files Needing Attention: docs/tracking-methods/integrations/nextjs.mdx
|
| Filename | Overview |
|---|---|
| docs/tracking-methods/integrations/nextjs.mdx | The import correction is sound, but the Pages Router update drops client-side navigation page views because SPA tracking is not enabled. |
Reviews (2): Last reviewed commit: "Rely on Autocapture for Next.js pageview..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
The page initializes with autocapture: true, which defaults pageview to "full-url" (see docs/tracking-methods/sdks/javascript.mdx). Next.js route changes are history.pushState calls, so Autocapture already emits a pageview on each one. The added trackPageView helper fired a second, billable "Page View" event alongside it. Drop the manual pageview path so the Pages Router example matches the App Router example, which already inits only. Also fix the .env block mislabeled as javascript, and _app.tsx (app.tsx is just a route). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
| 4. Initialize Mixpanel in your Next.js application | ||
|
|
||
| a. **If using page router**, open or create the file `_app.js` or `app.tsx` in your pages/ directory. Then import and initialize Mixpanel inside `useEffect`. You’ll also need to track pageviews manually using `useRouter`. | ||
| a. **If using page router**, open or create the file `_app.js` or `_app.tsx` in your `pages/` directory. Then import and initialize Mixpanel inside `useEffect`. Autocapture tracks pageviews on route change for you, so you don't need to track them manually. |
There was a problem hiding this comment.
When a Pages Router user navigates through Next.js links or the router, autocapture: true without an SPA-compatible track_pageview setting does not record the route change, causing all page views after the initial load to be missing from analytics.
Two broken code snippets on the Next.js integration page caused runtime errors for users following the guide.
Changes
Missing
trackPageViewexport — the page router example importedtrackPageViewfrommixpanelClientbut the function was never defined in that file. Added the export:Incorrect import style for
MixpanelProvider—layout.jssnippet used a named import ({ MixpanelProvider }) but the component is a default export. Fixed to: