# Next.js analytics with Dataflare: setup in two minutes

Next.js apps on Vercel, on Cloudflare (via OpenNext) or anywhere else can send analytics to a Dataflare Worker in your Cloudflare account. The script tag loads after the page is interactive and tracks client-side navigations automatically.

Dataflare is open-source analytics that runs in your own Cloudflare account: web analytics, product analytics (trends, funnels, retention), session replay, feature flags and A/B tests. There is no Dataflare service to sign up for. Your events go to a Worker and a D1 database in your account.

## 1. Deploy Dataflare

From your project's root, with a [Cloudflare API token](/docs/getting-started/#1-create-an-api-token):

```sh
CLOUDFLARE_API_TOKEN=… npx dataflare-cli init
```

`dataflare init` detects Next.js from your `package.json`, creates the database, the replay bucket and the Worker, and prints the snippet below with your real host and project filled in. It also writes `AGENTS.md`, a Claude Code skill and `.mcp.json`, so your coding agent can do the next steps for you.

## 2. Add the snippet

In `app/layout.tsx (App Router) or pages/_app.tsx`:

```ts
import Script from 'next/script';

// inside <body>:
<Script src="https://glass.<you>.workers.dev/s.js" data-project="my-app" strategy="afterInteractive" />
```

Page views, clicks, JavaScript errors and Core Web Vitals start arriving straight away.

## 3. Track what matters

```js
window.glass?.capture("signup_completed", {"plan":"pro"});
```

After someone signs in, link their visits to their account so funnels span the moment of signup:

```js
window.glass?.identify(user.id, { plan: user.plan });
```

Name events `object_action` in the past tense (`signup_completed`, `invite_sent`) and put details in properties, never personal data.

Server actions and route handlers can send events too: POST to `<host>/e` (see the [SDK docs](/docs/sdk/#server-side-events)), with the same `distinct_id` the browser uses if you want them joined to the visit.

## 4. Check it works

```sh
npx dataflare-cli status
npx dataflare-cli events signup_completed
```

Then open `https://glass.<you>.workers.dev/app` (sign in with `npx dataflare-cli key`), or ask your agent: *"Which traffic source converts best to signup?"*

## Serve it from your own domain

Ad blockers often block third-party analytics domains. Serve Dataflare from a path on your own site instead, if your domain is on Cloudflare:

```sh
npx dataflare-cli init --route example.com
```

Then use `https://example.com/_glass` as the host in the snippet.

## Next

- [Browser SDK reference](/docs/sdk/): options, flags, replay, consent
- [Session replay your agent can read](/guides/session-replay-for-agents/)
- [What it costs](/pricing/)