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 add

The 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 a thin wrap and rewrites only the read APIs. Import reads from ReadMeter; import everything else from firebase/firestore:

import { getDoc, getDocs, onSnapshot } from './lib/readmeter-firestore'
import { collection, doc, query, where, Timestamp } from 'firebase/firestore'

Turbopack (Next.js 16+)

Do not export * from 'firebase/firestore' in the wrapper. Under Turbopack, any import { getDoc } from './readmeter-firestore' then compiles the entire Firestore SDK — first compile can take minutes and OOM a laptop.

Keep the wrapper limited to getDoc, getDocs, and onSnapshot. Leave collection, doc, query, and where on firebase/firestore. Avoid putting the wrapper on the root layout unless that layout actually reads Firestore.

Init already vendors this thin wrap. If an older install rewrote mixed imports onto the wrapper, re-run readmeter init --yes (or readmeter fix-imports --yes) to split them.