Adopture

Next.js SDK

Complete guide to using Adopture with Next.js applications

Next.js SDK

The Adopture Next.js SDK provides seamless feature adoption tracking for both App Router and Pages Router applications.

Key Features

  • 🚀 Zero Configuration: Works out of the box with minimal setup
  • 📱 Universal Support: App Router and Pages Router compatibility
  • ⚡ React Hooks: Easy-to-use hooks for tracking
  • 🎯 Automatic Detection: Smart activation vs usage tracking
  • 📊 Real-time: Instant analytics in your dashboard

Getting Started

Choose your preferred starting point:

Quick Setup

5-Minute Quick Start → Get tracking events in under 5 minutes

Detailed Setup

Complete Setup Guide → Comprehensive configuration options

Learn by Example

Practical Examples → Real-world implementation patterns

Core Concepts

Automatic Event Classification

The SDK automatically determines whether user interactions are:

  • Activations: First-time usage of a feature
  • Usage: Subsequent interactions with the feature

React Hooks

Simple, intuitive hooks for all tracking needs:

  • useTrack() - Track feature usage
  • useExpose() - Track feature visibility
  • useIdentify() - Identify users

Example Usage

'use client';

import { useTrack, useComponentTracking } from '@adopture/next';

export function FeatureButton() {
  const { track } = useTrack();

  // Automatically track component visibility
  useComponentTracking('feature-button', {
    exposureChannel: 'main-nav',
  });

  const handleClick = () => {
    // SDK automatically determines activation vs usage
    track('feature-used', {
      location: 'navigation',
      timestamp: new Date().toISOString(),
    });
  };

  return <button onClick={handleClick}>Use Feature</button>;
}

Architecture Support

App Router (app/ directory)

Modern Next.js applications using the App Router:

// app/layout.tsx
import { AdoptureProvider } from '@adopture/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AdoptureProvider>
          {children}
        </AdoptureProvider>
      </body>
    </html>
  );
}

Pages Router (pages/ directory)

Traditional Next.js applications using Pages Router:

// pages/_app.tsx
import { AdopturePagesProvider } from '@adopture/next';

export default function App({ Component, pageProps }) {
  return (
    <AdopturePagesProvider>
      <Component {...pageProps} />
    </AdopturePagesProvider>
  );
}

Next Steps

  1. Setup Guide → - Configure the SDK
  2. Event Tracking → - Learn the tracking APIs
  3. Examples → - See real-world patterns
  4. API Reference → - Complete documentation

Need Help?

Installation

Install and configure Adopture Next.js SDK

Next.js Setup

Complete setup guide for Next.js applications with App Router and Pages Router