Simple Integration for Next.js (https://nextjs.org) and Cloudflare Web Analytics (https://www.cloudflare.com/web-analytics). Cloudflare Web Analytics is a simple and lightweight privacy-first analytics and performance metrics service.
Cloudflare Web Analytics Overview
Cloudflare Web Analytics provides free, privacy-first analytics for your website... All you need to enable Cloudflare Web Analytics is a Cloudflare account and a JavaScript snippet on your page to start getting information on page views and visitors.
npm install next-cloudflare-web-analytics --save
or
yarn add next-cloudflare-web-analytics
If you are using the Next.js App Router, to enable Cloudflare Web Analytics you will
need to add the <CloudflareWebAnalyticsProvider /> into the
root layout.js:
// app/layout.js
import CloudflareWebAnalyticsProvider from 'next-cloudflare-web-analytics'
export default function RootLayout({children}) {
return (
<html lang="en">
<CloudflareWebAnalyticsProvider token={'XXXXXXXXX'}/>
<body>{children}</body>
</html>
)
}If you are using the Next.js Next.js Pages Router, to enable Cloudflare Web Analytics
you'll need to add the <CloudflareWebAnalyticsProvider />at the top level of your application
inside a custom _app.js:
// pages/_app.js
import CloudflareWebAnalyticsProvider from 'next-cloudflare-web-analytics'
export default function MyApp({Component, pageProps}) {
return (
<CloudflareWebAnalyticsProvider token={'XXXXXXXXX'}>
<Component {...pageProps} />
</CloudflareWebAnalyticsProvider>
)
}| Name | Type | Description |
|---|---|---|
| token | string | The token provided by Cloudflare Web Analytics of the site you want to monitor. Required |
| spaIsDisabled | boolean | Set this to true to disable Cloudflare Web Analytics Single Page Application measurements. |
| enabled | boolean | Use this to explicitly decide whether or not to render script. If not passed the script will be rendered in production environments only based on either NODE_ENV or NEXT_PUBLIC_VERCEL_ENV. |
npm run buildwill build the project to thedistfoldernpm run watchwill watch and build the project to thedistfolder