React Next Google Tools
Lightweight, zero-boilerplate Google Analytics library for React & Next.js.
Key Metrics & Impact
Version 1.1.0 active on NPM registry
Universal App Router & Pages Router & React support
Zero external dependencies outside peer React/Next
Sub-kilobyte footprint with tree-shakeable ESM/CJS exports
Pain Point & Friction
Official Google Analytics setups in Next.js require manual script tags, custom hooks for pathname changes, and separate workarounds for Pages Router vs App Router, frequently damaging Core Web Vitals (LCP/INP) and causing tracking drops.
Engineered Approach
Built an optimized library using Rollup and TypeScript. Detects Next.js runtime to use 'next/script' with lazy loading, while gracefully falling back to native script loading in standard React/Vite environments. Automatically binds to History API and router events for 100% accurate pageview attribution.
⚡ Core Features
- ✓Single component drop-in: <GoogleAnalytics id="G-XXXXXXXXXX" />
- ✓Automatic client-side navigation and pageview tracking
- ✓Dual runtime support: optimized next/script or native HTML <script>
- ✓Comprehensive TypeScript type definitions included out of the box
- ✓Production-safe toggle to prevent test analytics contamination
⚙ Architecture & Engineering
- →Rollup build pipeline with @rollup/plugin-typescript and terser minification
- →Dual ESM (dist/index.js) and CommonJS (dist/index.cjs.js) distribution
- →Strict semantic versioning with MIT open-source license
- →CI/CD release workflow for zero-friction npm publishing