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

   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:

   {
     "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.