Skip to main content

Install on Next.js, React Native, and Node.js

Use these SDKs when your product is built with Next.js, React Native, or server-side Node.js. Enable Mobile apps or Backend during Create your first property before sending events from those runtimes.

Next.js

Install the package:

npm install @nexly/next

Add the provider from a client component:

'use client'

import { NexlyNextProvider } from '@nexly/next'

export function AnalyticsProvider({children}: {children: React.ReactNode}) {
return (
<NexlyNextProvider appId="your-app-id" ingestKey="your-ingest-key" autoPageView autoEngagement>
{children}
</NexlyNextProvider>
)
}

The Next.js SDK tracks client-side route changes. Use the Node.js SDK for backend events from route handlers, jobs, or server-only code.

React Native

Install the package:

npm install @nexly/react-native

Initialize the client and send screenviews when the visible screen changes:

import { Button } from 'react-native'
import { NexlyProvider, useNexlyClient } from '@nexly/react-native'

export function App() {
return (
<NexlyProvider appId="your-app-id" ingestKey="your-ingest-key" autoEngagement initialScreen="Home">
<Root />
</NexlyProvider>
)
}

function Root() {
const client = useNexlyClient()

return (
<Button
title="Upgrade"
onPress={() => client?.customEvent('upgrade_clicked', { plan: 'pro' })}
/>
)
}

Enable Mobile SDK traffic in the Installation settings so mobile events are accepted.

Call client?.screenview('Settings') from your navigation callback when the visible screen changes.

Node.js

Install the package:

npm install @nexly/node

Send backend events from services, API routes, or workers:

import { Nexly } from '@nexly/node'

const nexly = Nexly.init({
appId: 'your-app-id',
key: 'your-ingest-key',
})

nexly.customEvent('invoice_paid', {
plan: 'startup',
amount_cents: 4900,
})

Enable Backend SDK traffic in the Installation settings so server-side events are accepted.

To attach backend events to the same user timeline as browser pageviews, forward the browser visitor ID to your server and pass it in context when emitting Node events. See Link browser and backend events for the full walkthrough.

Verification

Use the events feed to confirm which client is sending data. The Technology widget can also show SDK client sources after events are stored.