> ## Documentation Index
> Fetch the complete documentation index at: https://help.trfyx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js

> Install Trfyx in a Next.js application.

# 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.

<Note>
  **Prerequisites:** You should have a working Next.js project using the App Router and access to the Trfyx project installation settings.
</Note>

## 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.

```tsx theme={null}
import Script from "next/script"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.trfyx.com/script.js"
          data-website-id="YOUR_TRFYX_PROJECT_ID"
          data-domain="yourdomain.com"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}
```

<Warning>
  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`.
</Warning>

<Tip>
  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.
</Tip>

<Note>
  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.
</Note>

## 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.


## Related topics

- [Vercel v0](/vercel-v0.md)
- [Lovable](/lovable.md)
- [Vue.js](/vuejs.md)
- [Welcome to Trfyx](/index.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.