Next.js SDK

Event tracking for Next.js with client and server support.

Installation

bash: npm install @vanta-dev/next

npm install @vanta-dev/next

Client usage

Use the provider in a client component:

tsx: 'use client'

'use client'
import { VantaProvider, useVanta } from '@vanta-dev/next/client'

export function Providers({ children }) {
  return (
    <VantaProvider config={{ apiKey: 'vk_...' }}>
      {children}
    </VantaProvider>
  )
}

Server usage

Create a server-side instance:

typescript: import { createServerVanta } from '@vanta-dev/next/server'

import { createServerVanta } from '@vanta-dev/next/server'

const serverVanta = createServerVanta({
  apiKey: process.env.VANTA_API_KEY
})

// Use in server actions or API routes
await serverVanta.track({
  event: 'server.action',
  data: { action: 'export' }
})

Using the hook

tsx: 'use client'

'use client'
import { useVanta } from '@vanta-dev/next/client'

function MyComponent() {
  const vanta = useVanta()

  return (
    <button onClick={() => vanta.track({ event: 'click' })}>
      Track
    </button>
  )
}