Next.js

Device Intelligence for Next.js

Full-stack Device Identification integration for Next.js (App Router + Pages Router). Add visitor identification, bot detection, and smart signals to your Next.js application in minutes.

Get Started Live Demo

Quick Install

Add the SDK to your project with your preferred package manager.

npmnpm install @tracio/client

yarnyarn add @tracio/client

pnpmpnpm add @tracio/client

Basic Usage

Get up and running with the minimal setup.

$tsx

// app/layout.tsx
import { TracioProvider } from '@tracio/client/react'
export default function Layout({ children }) {
  return (
    <TracioProvider apiKey="your-key">
      {children}
    </TracioProvider>
  )
}

Advanced Patterns

Production-ready patterns with error handling, loading states, and advanced configuration.

Server-Side getServerSideProps Pattern — Click to expand

// pages/dashboard.tsx
import { TracioServer } from '@tracio/client/node'
export async function getServerSideProps(context) {
  const tracio = new TracioServer({ apiKey: process.env.TRACIO_SECRET })
  const requestId = context.query.requestId as string
  const event = await tracio.getEvent(requestId)
  return {
    props: {
      visitorId: event.products.identification.data.visitorId,
      confidence: event.products.identification.data.confidence.score,
      botDetected: event.products.botd.data.bot.result !== 'notDetected',
      incognito: event.products.incognito.data.result,
    },
  }
}
export default function Dashboard({ visitorId, confidence, botDetected }) {
  return (
    <div>
      <h1>Welcome back, {visitorId.slice(0, 8)}...</h1>
      <p>Confidence: {(confidence * 100).toFixed(1)}%</p>
      {botDetected && <Alert>Bot activity detected</Alert>}
    </div>
  )
}