Vercel Analytics & Speed Insights Setup
Wire up Vercel Analytics, Speed Insights, and SPA routing rewrites into a React/Vite project in one pass — including the routing fix most people miss.
You add Vercel Analytics, check the dashboard a week later, and it's empty. The package installed fine — you just imported from the wrong entry point, and nothing told you.
Who it's for: React and Vite developers deploying to Vercel, indie hackers wanting traffic data without a heavier analytics stack, solo founders setting up a new SPA, developers debugging a 404-on-refresh bug in production
Example
"Set up Vercel Analytics for this Vite app" → @vercel/analytics and @vercel/speed-insights installed, both components mounted with the correct /react imports, a vercel.json rewrite rule added so direct route navigation stops 404ing, and a verification pass confirming both actually render
CLAUDE.md Template
New here? 3-minute setup guide → | Already set up? Copy the template below.
npx ccplaybooks add vercel-analytics-setup# Vercel Analytics & Speed Insights Setup
## Your Role
Wire up Vercel Analytics and Speed Insights into a React/Vite project, and fix the SPA routing gap that causes direct-navigation 404s on Vercel. One-shot setup, not an ongoing workflow.
---
## Tasks
### 1. Install the packages
Get new playbooks like this one
One email a week with new Claude Code workflows. Free, like everything here.
No spam. Unsubscribe anytime.
What This Does
A one-shot setup task for React/Vite projects deploying to Vercel: installs Analytics and Speed Insights, mounts them correctly, and fixes the SPA routing gap that causes 404s when someone refreshes on a non-root route — a bug that only shows up in production, never in local dev.
Quick Start
Step 1: Navigate to Your Project
cd ~/your-vite-project
Step 2: Download the Template
Click Download above, then:
mv ~/Downloads/CLAUDE.md ./
Step 3: Run the Setup
claude
Then ask: "Set up Vercel Analytics and Speed Insights"
What Gets Configured
| Component | Purpose |
|---|---|
@vercel/analytics |
Page view and visitor tracking |
@vercel/speed-insights |
Core Web Vitals monitoring |
vercel.json rewrite rule |
Serves index.html for all routes, fixing direct-navigation 404s |
Tips & Best Practices
- Import from
/react, not/next. The two entry points look nearly identical and neither errors if you pick wrong — the wrong one just silently collects nothing. If the Vercel dashboard stays empty after a deploy, check this first. - Test routing with a direct URL hit, not in-app navigation. Vite's dev server already handles client-side routing correctly, so the missing-rewrite bug never shows up locally. Only a hard refresh or a shared link on a nested route — after deploying — will surface it.
- This is a five-minute task, not an ongoing workflow. It doesn't set up custom event tracking, alerting, or dashboard configuration — just the two packages and the routing fix.
Limitations
- Scoped to React/Vite projects specifically — Next.js apps use different Vercel Analytics import paths and don't need the
vercel.jsonrewrite (Next.js handles SPA-style routing server-side already) - Doesn't cover custom event tracking or alerting — only the base pageview/vitals setup