# Next.js Analytics Integration
Server-side and client-side analytics tracking for Next.js applications.
## Features
- Server-side page view tracking
- Client-side event tracking
- App Router and Pages Router support
- Edge runtime compatibility
- Automatic route change tracking
## Files
| File | Description |
|------|-------------|
| `analytics-provider.tsx` | Root provider with client-side initialization |
| `server-analytics.ts` | Server-side tracking utilities |
| `middleware.ts` | Edge middleware for request tracking |
| `use-analytics.ts` | Client-side hook for tracking |
| `layout.tsx` | Example root layout integration |
## Quick Start
```tsx
// app/layout.tsx
import { AnalyticsProvider } from './analytics-provider';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
## Server-Side Tracking
Track events from Server Components and API Routes:
```ts
import { trackServerEvent } from './server-analytics';
// In a Server Component
export default async function ProductPage({ params }) {
await trackServerEvent({
type: 'page_view',
action: 'product_viewed',
metadata: { productId: params.id },
});
return ;
}
```
## Edge Middleware
The middleware tracks all page requests at the edge:
```ts
// middleware.ts - tracks requests before they hit your app
export { middleware } from './middleware';
export const config = { matcher: ['/((?!api|_next|static).*)'] };
```