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:

• Install Vercel Packages

npm install @vercel/analytics @vercel/speed-insights

• 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

• 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)

• Create vercel.json Configuration

- Create vercel.json in project root

- Add SPA rewrite rules:

{
     "rewrites": [
       { "source": "/(.*)", "destination": "/index.html" }
     ]
   }

- This ensures all routes serve index.html (fixes 404s)

• 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:

• Deploy to Vercel: vercel deploy
• View analytics at: https://vercel.com/dashboard/analytics
• Check Speed Insights: https://vercel.com/dashboard/speed-insights

Note: Works with React, Vite, Create React App, and other SPA frameworks.