> ## Documentation Index
> Fetch the complete documentation index at: https://docs.veristar.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
> Add the tracker to a Next.js app that uses the App Router.
For Next.js with the App Router. Tested by the example [`examples/nextjs`](https://github.com/justmert/veristar/tree/main/examples/nextjs)
(Next.js 16.4.6, React 19.3.1, `next build` and `next start`), which runs in the browser test
matrix.
## Where the tag goes
Render the tag as a plain `
```
Write `crossOrigin` in JSX; React renders it as `crossorigin`. The example is plain JavaScript only
because Next.js type-checks TypeScript projects through the `typescript` package's compiler API,
which the TypeScript 7 pinned in this repository does not offer; in a TypeScript app the layout is
the same.
## Route changes
The first load is server rendered and is one pageview. `` navigations happen on the client
with `history.pushState`, which the tracker watches, so each is one pageview; back and forward
too.
**Known limitation.** Right after a back or forward navigation, the App Router rewrites the
current history entry with `history.replaceState`, before the tracker's 300 ms delay for that
pageview has passed. The pageview is counted for the right page, but its referrer becomes the page
itself instead of the page the visitor came from. Referrers inside your own site are not stored
anyway (they are sent as paths and dropped by the gateway), so the dashboards are not affected;
only a `data-before-send` hook that reads the referrer would see it. The browser test checks the
referrer only for forward navigations on this example for that reason.
## Custom events
`data-umami-event` attributes work in server and client components alike. A click handler needs a
client component:
```js theme={null}
// a click handler needs a client component. the tracker may be blocked by the
// visitor, so the call is optional.
export function TrackButton() {
return (
);
}
```
## What the browser tests check
One pageview per server-rendered load and per client-side navigation, back and forward, the
previous route as referrer on forward navigations, an external referrer on the first pageview,
both kinds of custom event, Global Privacy Control and a tampered tracker refused
(`tests/e2e/specs`, `examples/nextjs/test`).
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.