Next.js

Prerequisites

tinytrack websiteId
Nextjs 14+

Install

Install tinytrack package

npm install @tinytrack/nextjs

Add the proxy

Create proxy.ts at the root of src/:

// src/proxy.ts
import { createTinyTrackProxy } from '@tinytrack/nextjs';

export const proxy = createTinyTrackProxy({ websiteId: 'your_website_id' });

export const config = {
	matcher: ['/((?!_next/static|_next/image).*)'],
};

Next.js 14+: use middleware.ts

Use middleware.ts at the root of src/ with a middleware export instead:

// src/middleware.ts
import { createTinyTrackMiddleware } from '@tinytrack/nextjs';

export const middleware = createTinyTrackMiddleware({ websiteId: 'your_website_id' });

export const config = {
	matcher: ['/((?!_next/static|_next/image).*)'],
};

Already have middleware or a proxy?

Rename your existing handler to appMiddleware and wrap it using the named import:

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

Add the tracker

Choose your router and add the component once.

App Router

Add the tracker inside your existing server layout’s <body>:

// app/layout.tsx
import type { ReactNode } from 'react';
import { TinyTrack } from '@tinytrack/nextjs/react';

export default function RootLayout({ children }: { children: ReactNode }) {
	return (
		<html lang="en">
			<body>
				{children}
				<TinyTrack websiteId="your_website_id" />
			</body>
		</html>
	);
}

Pages Router

Add the tracker alongside your page component:

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { TinyTrack } from '@tinytrack/nextjs/react/client';

export default function App({ Component, pageProps }: AppProps) {
	return (
		<>
			<Component {...pageProps} />
			<TinyTrack websiteId="your_website_id" />
		</>
	);
}

Optional: environment variable

Omit websiteId from both the middleware and tracker, and set this in .env.local and your hosting environment before building:

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:

// next.config.mjs
export default {
	env: { TINYTRACK_WEBSITE_ID: process.env.TINYTRACK_WEBSITE_ID },
};

⌘I

Get Started

Integrations

Core Concepts

Tracking

Goals & Funnels

Install

App Router

Pages Router

Optional: environment variable

​Install

​App Router

​Pages Router

​Optional: environment variable

Install

App Router

Pages Router

Optional: environment variable