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
- Browser SDK reference: options, flags, replay, consent
- Session replay your agent can read
- What it costs