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 Book a Demo

Quick Install

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

npmnpm install @tracio/react

yarnyarn add @tracio/react

pnpmpnpm add @tracio/react

Basic Usage

Get up and running with the minimal setup.

$tsx

// app/layout.tsx
import { TracioProvider } from '@tracio/react'
export default function Layout({ children }) {
  return (
    <TracioProvider publicKey={process.env.NEXT_PUBLIC_TRACIO_KEY!}>
      {children}
    </TracioProvider>
  )
}

Advanced Patterns

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

App Router Webhook Handler — Click to expand

// app/api/webhook/tracio/route.ts — identification events land here in real time
import crypto from 'crypto'
function verify(raw: Buffer, header: string, secret: string) {
  const p = Object.fromEntries(header.split(',').map((kv) => kv.split('=')))
  const signed = Buffer.concat([Buffer.from(`${p.t}.`), raw])
  const expected = crypto.createHmac('sha256', secret).update(signed).digest('hex')
  const a = Buffer.from(p.v1, 'hex')
  const b = Buffer.from(expected, 'hex')
  return a.length === b.length && crypto.timingSafeEqual(a, b)
}
export async function POST(req: Request) {
  const raw = Buffer.from(await req.arrayBuffer())
  const sig = req.headers.get('x-tracio-signature') ?? ''
  if (!verify(raw, sig, process.env.TRACIO_WEBHOOK_SECRET!)) {
    return new Response('Invalid signature', { status: 401 })
  }
  const event = JSON.parse(raw.toString())
  if (event.bot.result === 'bot') {
    await blockVisitor(event.visitorId)
  }
  return new Response('OK')
}

Configuration Options

All available options for initializing and configuring the SDK.

publicKeystringYour public key from the dashboard — safe to ship in the browser

endpointstringCustom endpoint URL for proxy-routed deployments — an explicit URL wins over region

regionstringData region: us or eu

timeoutMsnumberTimeout for the whole getResult() call, in milliseconds

linkedIdstringYour internal account ID for the signed-in user, so visits sharing a device can be linked

tagstringFree-form label attached to the identification request, e.g. checkout or login

debugbooleanLogs the script lifecycle and network activity to the browser console

scriptUrlstringFull override for the agent script URL — for self-hosting or Subresource Integrity

Next Steps

Go deeper with the full API reference, webhook configuration, and advanced guides.

Documentation

Full API reference, integration guides, and best practices.

Read Docs

Webhooks

Real-time event delivery, payload schema, and signature verification.

View Webhooks