Let AI write emails and messages for you 🔥

Add Cloudflare Web Analytics to Next.js site

Gourav Goyal

Gourav Goyal

Nov 2, 2023

Cloudflare Web Analytics - Privacy-first, lightweight, accurate web analytics—for free

Here’s a 2 minute guide on how to add Cloudflare Web Analytics to Next.js site.

Create free Cloudflare account


Enter your domain

As shown below

Get your unique token value

Copy token value as shown below

Add script to _document.tsx file

Add below to _document.tsx

(Replace token value with yours)

import { Head, Html, Main, NextScript } from 'next/document';

export default function Document() {
    return (
        <Html lang="en">
            <Head />
                <Main />
                <NextScript />
                {/* Cloudflare Web Analytics */}
                            data-cf-beacon='{"token": "TOKEN_VALUE", "spa": true}'


You can see analytics events in Cloudflare dashboard

That's all, folks!

Gourav Goyal

Gourav Goyal