Analytics options for Next.js

I want to add analytics and tracking to my next.js site which is deployed for free on netlify what are my options and how do I do it

Great — there are **lots of good options** for adding analytics to a entity["software", "Next.js", 0] site that’s deployed on entity["brand", "Netlify", 0], and the right choice depends on your goals (simple page-views vs deep event tracking, budget, privacy, etc.). I’ll walk you through **(A) what your main options are**, and then **(B) a concrete “how to”** for a common stack (Next.js + Netlify + Google Analytics 4) so you can pick and implement. --- ## A. Your analytics/tracking options — pros & cons Here are several approaches you could take; you can also mix them. ### 1. Use Netlify’s built-in “Project Analytics” - Netlify offers a built-in analytics feature called “Project Analytics” (for sites deployed on Netlify) that gives you page-views, unique visitors, top pages, top resources, etc. citeturn0search8turn0search30turn0search18 - **Pros**: Easy to enable, minimal setup, works even if the user has ad-blockers (since partly backend), good for basic metrics. citeturn0search8turn0search30turn0search18 - **Cons**: It’s quite basic compared to a full analytics platform (fewer custom events, fewer integrations). If you later want deeper tracking (events, funnels, etc.) you might outgrow it. ### 2. A traditional full analytics platform (e.g., Google Analytics 4) - Use entity["software", "Google Analytics 4", 0] (GA4) or equivalent to capture page-views, sessions, events, conversions. Many tutorials exist on how to hook into Next.js specifically. citeturn0search12turn0search2 entity_metadata["software","one-line","Google Analytics 4",0] - **Pros**: Rich features, well supported, lots of documentation & integrations. - **Cons**: More setup, potential privacy/Cookie issues (depending on your jurisdiction), extra script load, might impact performance if not done well. ### 3. A lightweight / privacy-focused analytics platform - Tools like entity["software", "Plausible Analytics", 0], entity["software", "Fathom Analytics", 0], or even self-hosted ones like entity["software", "Umami", 0]. For example, a blog post lists Plausible, Fathom as good privacy-friendly options for Next.js. citeturn0search13turn0search17 - **Pros**: Less invasive, simpler, fewer cookie/consent issues (depending on tool), often faster/lightweight. - **Cons**: Might have fewer features than GA4, might require paying for service or self-hosting. ### 4. Event / feature-flag / product analytics (deep tracking) - If you need to go beyond “how many visitors” to “what are they doing”, “how are features being used”, then tools like entity["software", "PostHog", 0] are relevant. There’s a tutorial for Next.js + PostHog. citeturn0search11 - **Pros**: Powerful for product analytics, custom events, server + client tracking. - **Cons**: More complex setup, more instrumentation work, maybe more cost. --- ## B. How to **set up analytics** on a Next.js site deployed on Netlify (example: GA4) Here’s a step-by-step guide which you can adapt to whichever tool you pick. I’ll assume you’re using Next.js (App Router or Pages Router) and deploying to Netlify. ### 1. Create your analytics account / tracking ID - For GA4: in your Google Analytics account create a property, add a Web data stream, copy the Measurement ID (looks like `G-XXXXX`). citeturn0search2turn0search12 - For alternative tools, sign up and get whichever token / site ID they provide. ### 2. Add the analytics script to your Next.js project - In Next.js you typically use the `next/script` component (or the new built-in component in Next.js 14+ via `@next/third-parties`) to load the analytics script. citeturn0search27turn0search0 - Example for GA4 / Next.js (Pages Router): in `pages/_app.js` or `pages/_document.js` you might add something along: ```js import Script from 'next/script' const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID export default function MyApp({ Component, pageProps }) { return ( <> <Script id="ga-script" strategy="afterInteractive" src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} /> <Script id="ga-init" strategy="afterInteractive" dangerouslySetInnerHTML={{ __html: ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${GA_TRACKING_ID}', { page_path: window.location.pathname, }); ` }} /> <Component {...pageProps} /> </> ) } ``` (This approach appears in older StackOverflow answers for Next.js + GA. citeturn0search19turn0search12) - If you’re using Next.js 14+ App Router you can use the `@next/third-parties/google` component: ```js import { GoogleAnalytics } from '@next/third-parties/google' export default function RootLayout({ children }) { return ( <html lang="en"> <body> {children} <GoogleAnalytics gaId="G-XYZ" /> </body> </html> ) } ``` citeturn0search27turn0search0 ### 3. Track “page views” on client-side route changes - Because Next.js SPA navigation may not reload the page, you’ll often need to hook into route changes to send a page view event. Example using `useRouter` in `useEffect`. citeturn0search19turn0search2 - For instance (Pages Router): ```js useEffect(() => { const handleRouteChange = (url) => { window.gtag('config', GA_TRACKING_ID, { page_path: url, }) } router.events.on('routeChangeComplete', handleRouteChange) return () => { router.events.off('routeChangeComplete', handleRouteChange) } }, [router.events]) ``` - If using App Router, some of this may be abstracted by the `@next/third-parties/google` component (it handles page-views for you). ### 4. Make sure your environment variables/config are correct on Netlify - On Netlify you can set environment variables in the dashboard. For example `NEXT_PUBLIC_GA_ID=G-XXXX` so the build has access. - Ensure you’re not accidentally hiding the analytics ID or loading script only in development. - There were reports of GA not working when env-vars weren’t set, especially on Netlify. citeturn0search6turn0search15 ### 5. Deploy to Netlify & validate - Deploy your site to Netlify (you mentioned you deploy “for free” on Netlify). - After deploy, open the site and then check in your analytics dashboard in Real-time view if your visit is recorded (for GA4). - Also inspect browser dev tools: check that the GA script is loaded (`gtag.js`) and `window.dataLayer` is being created. - If you don’t see sales/visitors, re-check your script insertion logic, router event logic, and env variables. ### 6. (Optional) Add custom events / conversions - If you want to track more than just “page view”, you can call `gtag('event', 'some_event', { … })` in your components when user takes an action (clicks button, submits form, etc.). - For other tools (PostHog, etc.) you’ll follow their SDK docs. ### 7. Privacy / performance considerations - Because you’re loading third-party scripts, be aware of possible performance impact and user consent / cookie law implications (GDPR/CCPA). - A lightweight alternative or backend tracking (Netlify’s) could help if you care about privacy or script load time. Netlify’s built-in analytics is beneficial because it’s server-side and minimal client-JS. citeturn0search30turn0search8 --- ## C. Summary & recommendation - If you just want **basic page-views with zero fuss**, enable Netlify’s Project Analytics. - If you want **more detailed analytics** (sessions, custom events, integrations) then use GA4 (or Plausible/Fathom for privacy-friendly). - Use Next.js docs + upcoming helper libraries (like `@next/third-parties`) to integrate cleanly. citeturn0search0 - On Netlify, ensure your build/env is correctly configured, and test after deployment. - Monitor performance & privacy. --- If you like, I can **pull together a full code snippet / boilerplate** for the exact version of Next.js you’re using (Pages Router vs App Router) *and* show how to hook it up with Netlify environment variables + deployment. Would that be helpful?

it has to be free and not google

Great — since you want **free** analytics *and* you want to avoid entity["software","Google Analytics",0], here are some solid alternatives + how to implement one on your entity["software","Next.js",0] site deployed on entity["organization","Netlify",0]. --- ## 🔍 Recommended Free / Privacy-Friendly Analytics Options Here are three good ones; each has trade-offs so I’ll include what they cost (free tier) and how they differ. ### 1. entity["software","Matomo",0] (open-source, self-host or hosted) entity_metadata["software","one-line","Matomo",0] - Matomo is an open-source web analytics platform that gives you full control of your data. citeturn0search2turn0search14turn0search21 - You can either self-host it (so fully free except your server costs) *or* use Matomo Cloud (may have free tier) depending on your traffic. citeturn0search5turn0search14turn0search2 - Pros: full feature set, huge flexibility, strong privacy. Cons: self-hosting means setup/maintenance; hosted free tiers may have limits. - Good for: If you have more traffic, want full control, or want to host the analytics yourself. ### 2. entity["software","Plausible Analytics",0] (lightweight, privacy-first) entity_metadata["software","one-line","Plausible Analytics",0] - Plausible is built to be simple, privacy-friendly, fast. No cookies (depending on config) and minimal script size. citeturn0search3turn0search11turn0search4 - They have a hosted service; not sure if there’s a generous forever-free tier (their docs show starting paid plans) but for small/side projects it may suffice. citeturn0search3turn0search11 - Pros: very simple setup, minimal bloat, high privacy. Cons: Feature set is smaller than full-blown analytics. - Good for: If your site is modest and you want just the essentials with a privacy-friendly stance. ### 3. entity["software","Umami",0] (open-source, super lightweight) entity_metadata["software","one-line","Umami",0] - While I didn’t fetch full docs here, community mentions “Umami” as a very lightweight free alternative where you self-host and you get basic stats (unique visitors, pageviews, referrers). citeturn0search11 - Pros: minimal, free (if you host it yourself), fast. Cons: limited/features compared to full analytics, you have to self‐host. - Good for: Personal blogs, portfolios, small projects where you just want basic stats and control. --- Given your criteria (free, not Google) I’d recommend you pick **Plausible** if you want easiest setup, or **Umami** if you’re comfortable self-hosting and want zero cost. Matomo is excellent but might be “overkill” for small free-hosted project. --- ## 🛠 Implementation Guide: Using Plausible on Next.js + Netlify Here’s a step-by-step to implement Plausible on your Next.js site (you can adapt if you pick Umami or Matomo). ### Step 1: Sign up / get tracking script - Go to plausible.io and create an account for your site. Get your “site ID” or tracking code/script. - Note: They may ask you which plan, but for small traffic you might use their starter/free option or trial. ### Step 2: Add the Plausible script to your Next.js app Assuming you use Next.js (either Pages Router or App Router) and you have a component that wraps your application. **If using Pages Router** (`pages/_app.js`): ```js import Script from 'next/script' function MyApp({ Component, pageProps }) { return ( <> {/* load Plausible script */} <Script strategy="afterInteractive" src="https://plausible.io/js/plausible.js" data-domain="your-domain.com" /> <Component {...pageProps} /> </> ); } export default MyApp; ``` **If using App Router (Next.js 13+ with `app/layout.js`)**: ```js // app/layout.js import Script from 'next/script' export default function RootLayout({ children }) { return ( <html lang="en"> <body> {children} <Script strategy="afterInteractive" src="https://plausible.io/js/plausible.js" data-domain="your-domain.com" /> </body> </html> ); } ``` Replace `your-domain.com` with your actual domain that will serve the site. ### Step 3: Track page-views on client side navigation Because Next.js uses client-side routing, you’ll want to ensure visits are tracked on route changes. In a simple way, you can add in your `pages/_app.js` (if Pages Router) something like: ```js import { useEffect } from 'react' import { useRouter } from 'next/router' function MyApp({...}) { const router = useRouter() useEffect(() => { const handleRouteChange = (url) => { window.plausible && window.plausible('pageview', { u: url }); } router.events.on('routeChangeComplete', handleRouteChange) return () => { router.events.off('routeChangeComplete', handleRouteChange) } }, [router.events]) // ...Script load and component return as above } ``` Check the Plausible docs for the exact method of calling `plausible('eventName')` or `pageview`. (The script will create a global `plausible` function.) ### Step 4: Set environment / deploy on Netlify - Make sure your site’s domain is properly configured in Plausible (if required). - On Netlify: you deploy as usual. Plausible’s script is client side, so it will load on your deployed site like any JS snippet. - If you need to set env vars (for example domain or site ID), you can do that in Netlify under Settings → Environment → Build & deploy → Environment variables. ### Step 5: Validate your analytics working - After deployment, visit your site (in a private/incognito window) and then go to Plausible dashboard → Real-time (or similar) and verify your visit shows up. - Also in browser dev tools: inspect network requests to `plausible.io/js/plausible.js`, and check for calls to plausible with the correct data-domain. ### Step 6: (Optional) Custom events If you want to track things beyond page views (clicks, conversions), you can call from your code: ```js if (window.plausible) { window.plausible('signup', { props: { plan: 'basic' } }); } ``` Then in your Plausible dashboard you’ll see “signup” events tracked. (Refer to their docs.) ### Step 7: Privacy / Consent Considerations One of the advantages of Plausible is the strong privacy orientation (cookieless, minimal user tracking) so you may reduce or even avoid requiring a cookie-consent banner (depending on your jurisdiction). citeturn0search3turn0search11 Still: check your local laws (GDPR, CCPA) to see if you need a banner. --- ## ✅ Summary & My Recommendation - Use Plausible if you want easiest free + no Google + privacy-friendly. - Use Umami if you want totally free (self-host) and minimalistic. - Use Matomo if you want full control/customization and don’t mind managing hosting. If you like, I can **look up and show you exactly how to integrate Umami (self-host) on Netlify + Next.js**, or **provide a full Next.js boilerplate file** ready to plug in for Plausible. Which of those would you rather do?