Next.js Integration

Full-stack Next.js 15 — public key in the frontend, secret key in API routes.

ℹ️

This guide uses App Router (Next.js 13+). For Pages Router, the pattern is the same — init in _app.tsx, verify in API routes.

1. Install

bash

npm install @certilayer/web @certilayer/node

2. Frontend — root layout

lib/certilayer.ts

import { init, showBadge } from '@certilayer/web'

// PUBLIC key — safe in browser. Keep the returned instance for getSessionId().
export const certilayer = init({ apiKey: process.env.NEXT_PUBLIC_CERTILAYER_PK! })
showBadge({ position: 'bottom-right' })

3. Send session ID

components/CheckoutButton.tsx

import { certilayer } from '@/lib/certilayer'

async function handleCheckout() {
  const sessionId = certilayer.getSessionId()

  await fetch('/api/checkout', {
    method: 'POST',
    headers: { 'X-CertiLayer-Session': sessionId },
    body: JSON.stringify(cart),
  })
}

4. Verify in API route

app/api/checkout/route.ts

import { CertiLayerClient } from '@certilayer/node'

const certilayer = new CertiLayerClient({
  apiKey: process.env.CERTILAYER_SECRET_KEY! // certilayer_live_sk_...
})

export async function POST(req: Request) {
  const sessionId = req.headers.get('X-CertiLayer-Session')
  const { verdict, score } = await certilayer.verifySession(sessionId!)

  if (verdict === 'synthetic') {
    return Response.json({ error: 'bot_detected' }, { status: 403 })
  }
  return processCheckout(req)
}

5. Environment variables

.env.local

NEXT_PUBLIC_CERTILAYER_PK=certilayer_live_pk_xxxx
CERTILAYER_SECRET_KEY=certilayer_live_sk_xxxx

U0001f6ab

Never put CERTILAYER_SECRET_KEY in a NEXT_PUBLIC_ variable — it would be exposed to the browser.