Lilith 317bd7c5b8 docs(examples): 📝 Refactor example configurations to align with latest best practices, adding clearer workflows and feature demonstrations

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>

2026-01-29 08:20:58 -08:00

1.7 KiB

Raw Blame History

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

// 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:

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:

// middleware.ts - tracks requests before they hit your app
export { middleware } from './middleware';
export const config = { matcher: ['/((?!api|_next|static).*)'] };

1.7 KiB Raw Blame History