Quick Start Guide

Get Adopture up and running in your Next.js app in under 5 minutes. This guide will take you from installation to tracking your first event.

1. Install the Package

Install the Adopture Next.js SDK:

npm install @adopture/next

2. Get Your API Key

Sign up at app.adopture.com
Create a new project
Copy your API key from the project settings

3. Add Environment Variable

Create or update your .env.local file:

NEXT_PUBLIC_ADOPTURE_API_KEY=your_api_key_here

4. Wrap Your App

App Router (app/ directory)

Add the provider to your root layout:

app/layout.tsx

import { AdoptureProvider } from '@adopture/next';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <AdoptureProvider>
          {children}
        </AdoptureProvider>
      </body>
    </html>
  );
}

Pages Router (pages/ directory)

Add the provider to your _app.tsx:

pages/_app.tsx

import { AdopturePagesProvider } from '@adopture/next';
import type { AppProps } from 'next/app';

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

5. Track Your First Event

Add tracking to any component:

components/ExampleButton.tsx

'use client';

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

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

  const handleClick = () => {
    // Track button click - SDK automatically handles activation vs usage
    track('example-button-click', {
      location: 'homepage',
      timestamp: new Date().toISOString(),
    });
  };

  return (
    <button onClick={handleClick}>
      Click me to track an event!
    </button>
  );
}

6. See Your Data

Click your button a few times
Go to your Adopture dashboard
View your real-time feature adoption metrics

What's Next?

Now that you're tracking events, explore more features:

Common Issues

Events not showing up?

Check your API key is correct
Ensure the provider wraps your components
Verify your component is client-side ('use client')
Check browser console for errors

Need help?

📧 Email us at help@adopture.com
💬 Join our Discord community
📚 Check the full setup guide →

Next: Complete Next.js Setup →

Quick Start

On this page