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:

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:

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

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

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

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), with the same distinct_id the browser uses if you want them joined to the visit.

4. Check it works

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:

npx dataflare-cli init --route example.com

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

Next