Next.js SDK

import { Aside, Tabs, TabItem } from ‘@astrojs/starlight/components’;

The Next.js SDK is optimized for both App Router and Pages Router with full support for Server Components.

Installation

npm install @analyze.rocks/nextjs

App Router

```tsx // app/layout.tsx import { AnalyzeProvider } from '@analyze.rocks/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AnalyzeProvider
          apiKey={process.env.NEXT_PUBLIC_ANALYZE_KEY!}
          host="https://ingest.analyze.rocks"
        >
          {children}
        </AnalyzeProvider>
      </body>
    </html>
  );
}
```

```tsx // app/layout.tsx import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://ingest.analyze.rocks/s/a.js"
          data-key={process.env.NEXT_PUBLIC_ANALYZE_KEY}
          data-host="https://ingest.analyze.rocks"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}
```

Pages Router

import { AnalyzeProvider } from '@analyze.rocks/nextjs';

export default function App({ Component, pageProps }) {
  return (
    <AnalyzeProvider
      apiKey={process.env.NEXT_PUBLIC_ANALYZE_KEY!}
      host="https://ingest.analyze.rocks"
    >
      <Component {...pageProps} />
    </AnalyzeProvider>
  );
}

Client Components

'use client';

import { useAnalyze } from '@analyze.rocks/nextjs';

export function SignupButton() {
  const { track, identify } = useAnalyze();

  const handleClick = () => {
    track('signup_clicked', { source: 'hero_section' });
  };

  return <button onClick={handleClick}>Get Started</button>;
}

Server Components

Track server-side events in API routes or Server Actions:

import { track } from '@analyze.rocks/nextjs/server';

export async function POST(request: Request) {
  const body = await request.json();

  await track('server_event', {
    userId: body.userId,
    properties: body.properties
  }, {
    apiKey: process.env.ANALYZE_SECRET_KEY!,
    host: 'https://ingest.analyze.rocks'
  });

  return Response.json({ success: true });
}

Server Actions

'use server';

import { track } from '@analyze.rocks/nextjs/server';

export async function createUser(formData: FormData) {
  const email = formData.get('email') as string;

  // Create user in database...
  const user = await db.user.create({ email });

  // Track server-side
  await track('user_created', {
    userId: user.id,
    properties: {
      signup_method: 'email',
      plan: 'free'
    }
  });

  return { success: true };
}

Environment Variables

NEXT_PUBLIC_ANALYZE_KEY=pk_live_xxxxx   # Public key (client-side)
ANALYZE_SECRET_KEY=sk_live_xxxxx        # Secret key (server-side only)

Middleware Integration

Track pageviews at the edge:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // Track pageview at edge
  fetch('https://ingest.analyze.rocks/api/v1/events', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.ANALYZE_SECRET_KEY}`
    },
    body: JSON.stringify({
      event: '$pageview',
      properties: {
        path: request.nextUrl.pathname,
        referrer: request.headers.get('referer')
      }
    })
  }).catch(() => {}); // Fire and forget

  return NextResponse.next();
}

Next Steps

React SDK – React hooks reference
Server API – Backend tracking guide
User Identification – Link users to their data