> ## Documentation Index
> Fetch the complete documentation index at: https://docs.postmetric.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
> Add PostMetric to your Next.js App Router project
Add PostMetric to your Next.js App Router project in minutes.
## Installation
### Step 1: Add the tracking script
Add the tracking script to your root layout (`app/layout.tsx`):
```tsx theme={null}
import Script from "next/script";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
Replace `YOUR_TRACKING_CODE` with your tracking code from the dashboard.
### Step 2: Verify installation
1. Start your development server: `npm run dev`
2. Visit your website
3. Check your PostMetric dashboard - you should see your visit
## Track custom goals
Track custom goals in your Next.js components:
```tsx theme={null}
"use client";
export default function Button() {
const handleClick = () => {
if (typeof window !== "undefined" && window.postMetric) {
window.postMetric("track", "goal", {
event: "button_click",
value: 0,
});
}
};
return ;
}
```
## User identification
Identify users when they log in:
```tsx theme={null}
"use client";
export default function LoginButton() {
const handleLogin = async () => {
// Your login logic here
const user = await login();
if (typeof window !== "undefined" && window.postMetric) {
window.postMetric("identify", {
userId: user.id,
email: user.email,
name: user.name,
});
}
};
return ;
}
```
## TypeScript types
Add TypeScript types for better type safety:
```typescript theme={null}
// types/PostMetric.d.ts
declare global {
interface Window {
PostMetric: (
method: "track" | "identify",
type: "pageview" | "goal",
data?: {
event?: string;
value?: number;
userId?: string;
email?: string;
name?: string;
}
) => void;
}
}
export {};
```
## Server-side tracking
For server-side tracking, use the API directly:
```tsx theme={null}
// app/api/track-goal/route.ts
import { NextRequest, NextResponse } from "next/server";
export async function POST(request: NextRequest) {
const { event, value, visitorId, sessionId } = await request.json();
const response = await fetch("https://your-domain.com/api/v1/goal", {
method: "POST",
headers: {
Authorization: `Bearer ${process.env.POSTMETRIC_API_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
event,
value,
visitorId,
sessionId,
}),
});
return NextResponse.json(await response.json());
}
```
## Next steps
Learn how to track custom user actions