Next.js
ReadMeter works with both the App Router and Pages Router. The installer auto-detects your setup and injects the widget.
Quick setup
From your Next.js project folder, run:
readmeter addThe installer copies the widget to public/readmeter-widget.js and adds it to your layout.
App Router
The widget is injected into app/layout.tsx using Next.js Script with strategy="beforeInteractive" so it loads before Firebase.
Pages Router
The widget is added to pages/_document.tsx in the <Head> section.
Modular Firebase SDK (v9+)
If you use import { getDoc, getDocs } from 'firebase/firestore', the installer copies the wrapper. Switch your imports:
// Before
import { getDoc, getDocs, onSnapshot } from 'firebase/firestore'
// After
import { getDoc, getDocs, onSnapshot } from './lib/readmeter-firestore'