Next.js

Device Intelligence для Next.js

Повностекова інтеграція Device Identification для Next.js (App Router + Pages Router). Додайте ідентифікацію відвідувачів, виявлення ботів і smart signals до вашого застосунку Next.js за лічені хвилини.

Почати роботу Замовити демо

Швидке встановлення

Додайте SDK до свого проєкту за допомогою улюбленого менеджера пакетів.

npmnpm install @tracio/react

yarnyarn add @tracio/react

pnpmpnpm add @tracio/react

Базове використання

Запустіться з мінімальним налаштуванням.

$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>
  )
}

Просунуті патерни

Production-ready патерни з обробкою помилок, станами завантаження та розширеним налаштуванням.

Обробник вебхуків App Router — Натисніть, щоб розгорнути

// 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')
}

Параметри конфігурації

Усі доступні параметри для ініціалізації та налаштування SDK.

publicKeystringВаш публічний ключ із панелі керування — його безпечно віддавати в браузер

endpointstringВласний URL ендпоінта для розгортань із проксі-маршрутизацією — явний URL важливіший за region

regionstringРегіон даних: us або eu

timeoutMsnumberЧас очікування всього виклику getResult(), у мілісекундах

linkedIdstringВаш внутрішній ID акаунта авторизованого користувача, щоб пов’язувати відвідування з одного пристрою

tagstringДовільна мітка, що додається до запиту ідентифікації, наприклад checkout або login

debugbooleanПише життєвий цикл скрипта та мережеву активність у консоль браузера

scriptUrlstringПовна заміна URL скрипта агента — для self-hosting або Subresource Integrity

Наступні кроки

Занурюйтесь глибше з повним довідником API, налаштуванням webhook і просунутими посібниками.

Почніть роботу з Next.js

Додайте фінгерпринтинг пристроїв до вашого застосунку Next.js менш ніж за 5 хвилин.

Посібник Quick Start Замовити демо

Device Intelligence для Next.js

Базове використання

Запустіться з мінімальним налаштуванням.

$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>
  )
}

Просунуті патерни

Production-ready патерни з обробкою помилок, станами завантаження та розширеним налаштуванням.

Обробник вебхуків App Router — Натисніть, щоб розгорнути

// 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')
}

Параметри конфігурації

Усі доступні параметри для ініціалізації та налаштування SDK.

publicKeystringВаш публічний ключ із панелі керування — його безпечно віддавати в браузер

endpointstringВласний URL ендпоінта для розгортань із проксі-маршрутизацією — явний URL важливіший за region

regionstringРегіон даних: us або eu

timeoutMsnumberЧас очікування всього виклику getResult(), у мілісекундах

tagstringДовільна мітка, що додається до запиту ідентифікації, наприклад checkout або login

debugbooleanПише життєвий цикл скрипта та мережеву активність у консоль браузера

scriptUrlstringПовна заміна URL скрипта агента — для self-hosting або Subresource Integrity

Device Intelligence для Next.js

Швидке встановлення

Базове використання

Просунуті патерни

Параметри конфігурації

Наступні кроки

Документація

Webhooks

Webhooks

Почніть роботу з Next.js

Device Intelligence для Next.js

Швидке встановлення

Базове використання

Просунуті патерни

Параметри конфігурації

Наступні кроки

Документація

Webhooks

Webhooks

Почніть роботу з Next.js