Install
Next.js
One Script in the root layout. Every route covered. Optional proxy for blockers.
Next.js
Fast path — root layout
Put this in app/layout.tsx (or src/app/layout.tsx) so every route loads StoreMetrics:
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://YOUR_STOREMETRICS_HOST/tracker.js"
strategy="afterInteractive"
data-velora-key="YOUR_SITE_KEY"
data-velora-site-id="YOUR_SITE_KEY"
data-velora-stack="nextjs"
/>
</body>
</html>
);
}Use the exact snippet from StoreMetrics onboarding/settings — your real host + site key are already filled in there.
Harder to block — same-origin proxy
If adblockers or CSP eat the script, proxy it:
// app/velora/tracker.js/route.ts (path can vary)
import { NextResponse } from "next/server";
export async function GET() {
const response = await fetch("https://YOUR_STOREMETRICS_HOST/tracker.js", {
headers: { "user-agent": "StoreMetricsProxy/1.0" },
cache: "no-store",
});
const script = await response.text();
return new NextResponse(script, {
headers: {
"Content-Type": "application/javascript; charset=utf-8",
"Cache-Control": "no-store",
},
});
}Point Script src at your proxy path (for example /velora/tracker.js).
Stripe shops
If you create Checkout Sessions in Next.js, attach StoreMetrics metadata. See Stripe revenue or steal the prompt from the prompt library.
Verify
# After deploy
# 1. Open your production URL
# 2. StoreMetrics dashboard → live feed should show youPrompt — install for me
Install StoreMetrics on this Next.js App Router repo.
Use next/script in the root layout with strategy="afterInteractive".
Site key: YOUR_SITE_KEY
Tracker: YOUR_VELORA_URL/tracker.js
data-velora-stack="nextjs"
Rules:
- Cover every public route.
- Do not invent or alter the site key attributes.
- Show the diff.
- If I say "proxy", add a same-origin route that serves tracker.js and switch the Script src.
Afterward, list the exact URL I should open to verify.