wehub-resource-sync
1 line
2.0 KiB
JSON
1 line
2.0 KiB
JSON
{"content": "---\nallowed-tools: Read, Write, Edit, Bash\nargument-hint:\ndescription: Set up Vercel Analytics and Speed Insights for React/Vite projects\n---\n\n# Vercel Analytics Setup\n\nAutomatically configure Vercel Analytics and Speed Insights for your React/Vite project.\n\n**Usage:** `/vercel-analytics` (no arguments needed)\n\n**What it does:**\n- Installs @vercel/analytics and @vercel/speed-insights packages\n- Adds components to your React app\n- Configures SPA routing for Vercel deployment\n- Fixes 404 errors for direct route access\n\n**Process:**\n\n1. **Install Vercel Packages**\n ```bash\n npm install @vercel/analytics @vercel/speed-insights\n ```\n\n2. **Detect Main App File**\n - Search for main React entry point:\n - `src/App.tsx` or `src/App.jsx`\n - `src/main.tsx` or `src/main.jsx`\n - Read file to determine current structure\n\n3. **Add Analytics Components**\n - Import Analytics from '@vercel/analytics/react'\n - Import SpeedInsights from '@vercel/speed-insights/react'\n - Add both components to the main App component\n - Use `/react` imports (not `/next`)\n\n4. **Create vercel.json Configuration**\n - Create `vercel.json` in project root\n - Add SPA rewrite rules:\n ```json\n {\n \"rewrites\": [\n { \"source\": \"/(.*)\", \"destination\": \"/index.html\" }\n ]\n }\n ```\n - This ensures all routes serve index.html (fixes 404s)\n\n5. **Verify Setup**\n - Confirm components are properly imported\n - Check vercel.json exists and is valid\n - Display success message with next steps\n\n**Expected Outcome:**\n- ✅ Analytics tracking active\n- ✅ Speed Insights monitoring configured\n- ✅ SPA routing works correctly on Vercel\n- ✅ No 404 errors on direct route access\n\n**Next Steps:**\n1. Deploy to Vercel: `vercel deploy`\n2. View analytics at: https://vercel.com/dashboard/analytics\n3. Check Speed Insights: https://vercel.com/dashboard/speed-insights\n\n**Note**: Works with React, Vite, Create React App, and other SPA frameworks.\n"} |