> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trakg.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
> Learn how to integrate Trakg with your Next.js app â including both App Router and Pages Router setups.
Trakg works seamlessly with both **App Router** and **Pages Router** in Next.js. It captures user interactions on any form built with standard HTML elements, and gives you real-time insights â with zero backend config.
***
## ðŠ Installation Overview
All you need is to embed the Trakg tracking script. We recommend using Next.jsâs built-in `` component for better performance.
ð **Replace `YOUR_ID_GIVEN` with your actual Site ID** found in your Trakg dashboard.
***
## âïž App Router (Next.js 13+)
If you're using the App Router (`/app` directory), you can add the script inside your `layout.tsx` or `layout.js` file â which wraps all routes.
### Example: `app/layout.tsx`
```tsx theme={null}
import Script from "next/script";
export default function RootLayout({children}: {children: React.ReactNode}) {
return (
{children}
{/* â
Trakg Script */}
);
}
```
## ð Pages Router
If you're using the traditional Pages Router (`/pages` directory), include the Trakg script in your custom `_document.js`.
### Example: \`pages/\_document.js
```tsx theme={null}
import {Html, Head, Main, NextScript} from "next/document";
export default function Document() {
return (