# 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 (
    <html>
      <body>
        <AnalyticsProvider
          collectorUrl={process.env.NEXT_PUBLIC_ANALYTICS_URL!}
          appName="my-nextjs-app"
        >
          {children}
        </AnalyticsProvider>
      </body>
    </html>
  );
}
```

## 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 <Product id={params.id} />;
}
```

## 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).*)'] };
```
