> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tinytrack.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
> TinyTrack analytics with the tracker and events served through your own domain.
**Prerequisites**
* [tinytrack websiteId](https://docs.tinytrack.io/website-id)
* Nextjs 14+
## Install
```sh theme={null}
npm install @tinytrack/nextjs
```
Create `proxy.ts` at the root of `src/`:
```ts theme={null}
// src/proxy.ts
import { createTinyTrackProxy } from '@tinytrack/nextjs';
export const proxy = createTinyTrackProxy({ websiteId: 'your_website_id' });
export const config = {
matcher: ['/((?!_next/static|_next/image).*)'],
};
```
Use `middleware.ts` at the root of `src/` with a `middleware` export instead:
```ts theme={null}
// src/middleware.ts
import { createTinyTrackMiddleware } from '@tinytrack/nextjs';
export const middleware = createTinyTrackMiddleware({ websiteId: 'your_website_id' });
export const config = {
matcher: ['/((?!_next/static|_next/image).*)'],
};
```
Rename your existing handler to `appMiddleware` and wrap it using the named import:
```ts theme={null}
import { withTinyTrackMiddleware } from '@tinytrack/nextjs';
export const middleware = withTinyTrackMiddleware(appMiddleware, {
websiteId: 'your_website_id',
});
```
For `proxy.ts`, export `proxy` instead. Keep your existing matcher entries and add `/_tinytrack/:path*`.
Choose your router and add the component once.
### App Router
Add the tracker inside your existing server layout's ``:
```tsx theme={null}
// app/layout.tsx
import type { ReactNode } from 'react';
import { TinyTrack } from '@tinytrack/nextjs/react';
export default function RootLayout({ children }: { children: ReactNode }) {
return (
{children}
);
}
```
### Pages Router
Add the tracker alongside your page component:
```tsx theme={null}
// pages/_app.tsx
import type { AppProps } from 'next/app';
import { TinyTrack } from '@tinytrack/nextjs/react/client';
export default function App({ Component, pageProps }: AppProps) {
return (
<>
);
}
```
### Optional: environment variable
Omit `websiteId` from both the middleware and tracker, and set this in `.env.local` and your hosting environment **before building**:
```dotenv theme={null}
TINYTRACK_WEBSITE_ID=your_website_id
```
**Pages Router only:** also add this `env` entry to your Next.js config so the tracker can read the ID in the browser:
```js theme={null}
// next.config.mjs
export default {
env: { TINYTRACK_WEBSITE_ID: process.env.TINYTRACK_WEBSITE_ID },
};
```