72 lines
1.7 KiB
Markdown
72 lines
1.7 KiB
Markdown
# 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).*)'] };
|
|
```
|