Quick start

Pick your framework and follow the steps. Most setups take under 5 minutes.

Before you start

Note: Instrumenting a mobile app? The dashboard has a Web / App switch next to your project name in the top bar. App stores, Deep linking, Nohmo Links and Uninstalls only appear in Settings while you are on the App side — if a tab the docs mention is not there, flip that switch.

You need two values, and every guide below uses them. Sign in and create a project, then open Settings → Setup — it shows your Project ID (proj_…) and API key (pk_…).

Note: Both are meant to ship in a browser bundle or a mobile app. They only allow writing events to your project — reading your dashboard needs your login, not this key. In the snippets below, proj_xxxx and pk_xxxx are placeholders for your own two values.

Install

bash

npm install nohmo

Wrap your root layout

Open app/layout.tsx and wrap your children with NohmoNextProvider. That's all — page views, clicks, scroll depth, and time spent are tracked automatically from this point.

tsx

// app/layout.tsx
import { NohmoNextProvider } from 'nohmo'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <NohmoNextProvider
          projectId={process.env.NEXT_PUBLIC_NOHMO_PROJECT_ID!}
          apiKey={process.env.NEXT_PUBLIC_NOHMO_API_KEY!}
        >
          {children}
        </NohmoNextProvider>
      </body>
    </html>
  )
}

Add your keys to `.env.local`

Get your project ID and API key from Dashboard → Settings → Setup.

env

NEXT_PUBLIC_NOHMO_PROJECT_ID=proj_xxxx
NEXT_PUBLIC_NOHMO_API_KEY=pk_xxxx

Note: Restart your dev server after adding env vars — Next.js won't pick them up otherwise.

Track a custom event (optional)

Use the useNohmo() hook anywhere inside the provider tree.

tsx

import { useNohmo } from 'nohmo'
 
export default function BuyButton() {
  const { send } = useNohmo()
  return (
    <button onClick={() => send('purchase_started', { plan: 'pro' })}>
      Buy now
    </button>
  )
}

Identify users at login (optional)

Call linkUser() after a successful login. All anonymous events from that device are retroactively attached to the user — nothing is lost.

tsx

const { linkUser } = useNohmo()
 
const handleLogin = async () => {
  const user = await loginAPI()
  await linkUser(user.id, user.email)
}

You're all set

Open your Nohmo dashboard. You should see devices and events appearing within seconds of your first page load.

Check it worked

Run your app and click around for a few seconds, then open Live Feed in the dashboard. Events appear within a few seconds of arriving — if you see them, you are done.

Nothing showing up? The SDK says why on the console rather than failing quietly — open your browser or Metro console and look for a line starting [Nohmo]. Most often the Project ID or API key belongs to a different project than the one you have open.

Console message	What it means
Server rejected the SDK credentials (HTTP 401)	projectId or apiKey is wrong. Copy both again from Settings → Setup.
event delivery failed: HTTP 4xx	The events reached the server and were refused. The status says why.
Nothing at all in the console	The SDK never started — check the provider actually wraps your app.