@tinytrack/nextjs
v0.1.5
Published
TinyTrack server-side analytics, first-party tracking endpoints, and automatic browser tracker injection for Next.js.
Maintainers
andreictReadme
@tinytrack/nextjs
TinyTrack analytics with the tracker and events served through your own domain.
Requirements:
- tinytrack websiteId
- nextjs 14+
Install
1. Install tinytrack package
npm install @tinytrack/nextjs2. Add the proxy
Next.js 16: 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 at 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*.
3. 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_idPages 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 },
};