var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var l in e)c(a,l,{get:e[l],enumerable:!0})},t=(a,e,l,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of m(e))!N.call(a,s)&&s!==l&&c(a,s,{get:()=>e[s],enumerable:!(i=p(e,s))||i.enumerable});return a};var f=(a,e,l)=>(l=a!=null?h(u(a)):{},t(e||!a||!a.__esModule?c(l,"default",{value:a,enumerable:!0}):l,a)),y=a=>t(c({},"__esModule",{value:!0}),a);var r=k((j,o)=>{o.exports=_jsx_runtime});var x={};g(x,{default:()=>v});var n=f(r());function d(a){let e=Object.assign({nav:"nav",ol:"ol",li:"li",a:"a",p:"p",strong:"strong",h3:"h3",svg:"svg",path:"path",code:"code",pre:"pre",span:"span"},a.components),{Img:l}=e;return l||w("Img",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.nav,{className:"page-outline mobile",children:(0,n.jsxs)(e.ol,{className:"toc-level toc-level-1",children:[(0,n.jsx)(e.li,{className:"toc-item toc-item-h3",children:(0,n.jsx)(e.a,{className:"page-link mobile page-link mobile-h3",href:"#create-free-cloudflare-account",children:"Create free Cloudflare account"})}),(0,n.jsx)(e.li,{className:"toc-item toc-item-h3",children:(0,n.jsx)(e.a,{className:"page-link mobile page-link mobile-h3",href:"#enter-your-domain",children:"Enter your domain"})}),(0,n.jsx)(e.li,{className:"toc-item toc-item-h3",children:(0,n.jsx)(e.a,{className:"page-link mobile page-link mobile-h3",href:"#get-your-unique-token-value",children:"Get your unique token value"})}),(0,n.jsx)(e.li,{className:"toc-item toc-item-h3",children:(0,n.jsx)(e.a,{className:"page-link mobile page-link mobile-h3",href:"#add-script-to-_documenttsx-file",children:"Add script to _document.tsx file"})}),(0,n.jsx)(e.li,{className:"toc-item toc-item-h3",children:(0,n.jsx)(e.a,{className:"page-link mobile page-link mobile-h3",href:"#profit",children:"Profit"})})]})}),(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Cloudflare Web Analytics"})," - Privacy-first, lightweight, accurate web analytics\u2014for free"]}),` `,(0,n.jsxs)(e.p,{children:["Here\u2019s a 2 minute guide on how to add Cloudflare Web Analytics to ",(0,n.jsx)(e.a,{href:"https://nextjs.org/",children:"Next.js site"}),"."]}),` `,(0,n.jsxs)(e.h3,{id:"create-free-cloudflare-account",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#create-free-cloudflare-account",children:(0,n.jsx)(e.svg,{"aria-hidden":!0,role:"img",className:"heading-link",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor",style:{display:"inline-block",visibility:"hidden",userSelect:"none",verticalAlign:"middle"},children:(0,n.jsx)(e.path,{fillRule:"evenodd",d:"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"})})}),"Create free Cloudflare account"]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://www.cloudflare.com/web-analytics/",children:"https://www.cloudflare.com/web-analytics/"})}),` `,(0,n.jsxs)(e.h3,{id:"enter-your-domain",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#enter-your-domain",children:(0,n.jsx)(e.svg,{"aria-hidden":!0,role:"img",className:"heading-link",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor",style:{display:"inline-block",visibility:"hidden",userSelect:"none",verticalAlign:"middle"},children:(0,n.jsx)(e.path,{fillRule:"evenodd",d:"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"})})}),"Enter your domain"]}),` `,(0,n.jsx)(e.p,{children:"As shown below"}),` `,(0,n.jsx)(l,{src:"/blog/cloudflare-analytics-nextjs/Untitled---2100568888.png",type:"ss",caption:""}),` `,(0,n.jsxs)(e.h3,{id:"get-your-unique-token-value",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#get-your-unique-token-value",children:(0,n.jsx)(e.svg,{"aria-hidden":!0,role:"img",className:"heading-link",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor",style:{display:"inline-block",visibility:"hidden",userSelect:"none",verticalAlign:"middle"},children:(0,n.jsx)(e.path,{fillRule:"evenodd",d:"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"})})}),"Get your unique token value"]}),` `,(0,n.jsx)(e.p,{children:"Copy token value as shown below"}),` `,(0,n.jsx)(l,{src:"/blog/cloudflare-analytics-nextjs/Untitled---1488013282.png",type:"ss",caption:""}),` `,(0,n.jsxs)(e.h3,{id:"add-script-to-_documenttsx-file",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#add-script-to-_documenttsx-file",children:(0,n.jsx)(e.svg,{"aria-hidden":!0,role:"img",className:"heading-link",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor",style:{display:"inline-block",visibility:"hidden",userSelect:"none",verticalAlign:"middle"},children:(0,n.jsx)(e.path,{fillRule:"evenodd",d:"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"})})}),"Add script to _document.tsx file"]}),` `,(0,n.jsxs)(e.p,{children:["Add below to ",(0,n.jsx)(e.code,{children:"_document.tsx"})]}),` `,(0,n.jsx)(e.p,{children:"(Replace token value with yours)"}),` `,(0,n.jsx)(e.pre,{className:"language-typescript",children:(0,n.jsxs)(e.code,{className:"language-typescript code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," Head",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," Html",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," Main",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," NextScript ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'next/document'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"Document"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"Html lang",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"en"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"Head ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"body",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"Main ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"NextScript ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token comment",children:"/* Cloudflare Web Analytics */"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),`script `]}),(0,n.jsx)(e.span,{className:"code-line",children:` defer `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" src",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"https://static.cloudflareinsights.com/beacon.min.js"'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" data",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"cf",(0,n.jsx)(e.span,{className:"token operator",children:"-"}),"beacon",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:`'{"token": "TOKEN_VALUE", "spa": true}'`}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"body",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"Html",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsxs)(e.h3,{id:"profit",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#profit",children:(0,n.jsx)(e.svg,{"aria-hidden":!0,role:"img",className:"heading-link",viewBox:"0 0 16 16",width:"16",height:"16",fill:"currentColor",style:{display:"inline-block",visibility:"hidden",userSelect:"none",verticalAlign:"middle"},children:(0,n.jsx)(e.path,{fillRule:"evenodd",d:"M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"})})}),"Profit"]}),` `,(0,n.jsx)(e.p,{children:"You can see analytics events in Cloudflare dashboard"}),` `,(0,n.jsx)(l,{src:"/blog/cloudflare-analytics-nextjs/Untitled---1013998633.png",type:"ss",caption:""}),` `,(0,n.jsx)(l,{src:"/blog/cloudflare-analytics-nextjs/Untitled---1067224982.png",type:"ss",caption:""})]})}function b(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(d,a)})):d(a)}var v=b;function w(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return y(x);})(); ;return Component;