Skip to main content

​
Install Trfyx in Next.js

The recommended approach is to load the Trfyx tracker from your root layout so it is available across the application without adding it to individual pages.
Prerequisites: You should have a working Next.js project using the App Router and access to the Trfyx project installation settings.

​
Add the tracker to the root layout

Open app/layout.tsx or app/layout.jsx and use the framework’s script component or the installation snippet supplied by Trfyx.
Replace YOUR_TRFYX_PROJECT_ID with the Website ID from your Trfyx project and yourdomain.com with the domain you want to track. Keep the script URL as https://app.trfyx.com/script.js.
Keep the tracker in the root layout so it loads once across your application. Do not add the same tracker to individual pages or nested layouts.
Do not paste server-side secrets into this component. Anything included in client-side HTML or JavaScript can be visible to visitors. Use only the public project configuration intended for browser tracking.

​
Deploy

Build and deploy the application to the environment you want to measure. Avoid counting preview traffic as production traffic if your project has separate environments.

​
Verify

Visit the deployed application and navigate between routes. Check Trfyx for the visit and page activity.

​
Common issues

  • The script is rendered more than once through nested layouts or another integration.
  • CSP blocks the script or collection request.
  • The wrong Trfyx project or hostname is configured.
  • You are checking preview traffic while viewing production analytics.
If your app uses a custom navigation architecture, verify route changes as well as full page loads.
Last modified on October 11, 2026