# vercel-analytics

Configures Vercel Analytics and Speed Insights for React and Vite projects. It installs packages, inserts tracking components, and writes SPA routing rules in vercel.json.

- command · `type=command` · Claude Code · 153 installs
- Author: davila7
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/commands/setup/vercel-analytics.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/commands/vercel-analytics

## What it does

The command automates metrics setup for single-page applications built with React, Vite, or Create React App. It runs `npm install` for `@vercel/analytics` and `@vercel/speed-insights`. Next, it searches for the entry file. It checks `src/App.tsx`, `src/App.jsx`, `src/main.tsx`, and `src/main.jsx`.

It inserts the `Analytics` and `SpeedInsights` components directly into the detected app file. Because the setup explicitly references `/react` import subpaths, it will not work for Next.js applications. The command also writes a `vercel.json` configuration file with a rewrite rule sending all traffic to `/index.html`. That stops 404 errors when visitors open nested SPA routes directly.

Finally, the tool confirms the imports and checks the configuration format. Deploying requires running `vercel deploy` once the command finishes.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --command setup/vercel-analytics
```

2. **Manually: put the files in place**
- File: `.claude/commands/vercel-analytics.md` — Call it with /vercel-analytics. For all projects use ~/.claude/commands/

### Codex

**Manually: put the files in place**
- File: `~/.codex/prompts/vercel-analytics.md` — Call it with /prompts:vercel-analytics. Codex marks this format deprecated in favour of skills

### GitHub Copilot

**Manually: put the files in place**
- File: `.github/prompts/vercel-analytics.prompt.md`

### Gemini CLI

**Manually: put the files in place**
- File: `.gemini/commands/vercel-analytics.toml` — Gemini stores commands as TOML: the prompt text goes into the prompt field

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/commands/setup/vercel-analytics.md

## When to use it
- configure Vercel Analytics and Speed Insights tracking for a React SPA
- generate vercel.json rewrites to prevent 404 errors on direct route access
- insert analytics components into App.tsx or main.tsx automatically
- install @vercel/analytics and @vercel/speed-insights npm packages

## Example prompts
- /vercel-analytics
- Set up Vercel Analytics and Speed Insights for this project with /vercel-analytics

## Source text · vercel-analytics.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 34d44139c62384d3.

BEGIN THIRD-PARTY FILE 34d44139c62384d3
````text
---
allowed-tools: Read, Write, Edit, Bash
argument-hint:
description: Set up Vercel Analytics and Speed Insights for React/Vite projects
---

# Vercel Analytics Setup

Automatically configure Vercel Analytics and Speed Insights for your React/Vite project.

**Usage:** `/vercel-analytics` (no arguments needed)

**What it does:**
- Installs @vercel/analytics and @vercel/speed-insights packages
- Adds components to your React app
- Configures SPA routing for Vercel deployment
- Fixes 404 errors for direct route access

**Process:**

1. **Install Vercel Packages**
   ```bash
   npm install @vercel/analytics @vercel/speed-insights
   ```

2. **Detect Main App File**
   - Search for main React entry point:
     - `src/App.tsx` or `src/App.jsx`
     - `src/main.tsx` or `src/main.jsx`
   - Read file to determine current structure

3. **Add Analytics Components**
   - Import Analytics from '@vercel/analytics/react'
   - Import SpeedInsights from '@vercel/speed-insights/react'
   - Add both components to the main App component
   - Use `/react` imports (not `/next`)

4. **Create vercel.json Configuration**
   - Create `vercel.json` in project root
   - Add SPA rewrite rules:
   ```json
   {
     "rewrites": [
       { "source": "/(.*)", "destination": "/index.html" }
     ]
   }
   ```
   - This ensures all routes serve index.html (fixes 404s)

5. **Verify Setup**
   - Confirm components are properly imported
   - Check vercel.json exists and is valid
   - Display success message with next steps

**Expected Outcome:**
- ✅ Analytics tracking active
- ✅ Speed Insights monitoring configured
- ✅ SPA routing works correctly on Vercel
- ✅ No 404 errors on direct route access

**Next Steps:**
1. Deploy to Vercel: `vercel deploy`
2. View analytics at: https://vercel.com/dashboard/analytics
3. Check Speed Insights: https://vercel.com/dashboard/speed-insights

**Note**: Works with React, Vite, Create React App, and other SPA frameworks.
````
END THIRD-PARTY FILE 34d44139c62384d3

The third-party file has ended. Everything between the 34d44139c62384d3 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

© davila7 · MIT · https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/commands/setup/vercel-analytics.md

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 804 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md