Switch to Vercel Analytics API for page view tracking

Replaced custom hit tracking with official Vercel Analytics API:

Benefits:
✅ Accurate, persistent data from Vercel Analytics
✅ No custom tracking infrastructure needed
✅ Survives deployments and restarts
✅ Leverages existing analytics package
✅ 1-hour cache reduces API calls
✅ No memory/performance issues

Implementation:
- Created /api/analytics/[slug] endpoint using Edge runtime
- Fetches page views from Vercel Analytics REST API
- Falls back gracefully when analytics not configured
- 1-hour cache with stale-while-revalidate
- Updated PageViewsCard to use new endpoint

Configuration:
- Added VERCEL_ACCESS_TOKEN to .env.example
- Added VERCEL_PROJECT_ID to .env.example
- Added VERCEL_TEAM_ID to .env.example (optional for teams)
- Shows "Powered by Vercel Analytics" when configured
- Shows "Analytics being configured..." when not set up

Documentation:
- Created comprehensive VERCEL_ANALYTICS_SETUP.md guide
- Step-by-step instructions for getting tokens
- Troubleshooting section
- Security and cost information
- Removed old HIT_TRACKING.md (obsolete)

Cleanup:
- Removed /api/hits endpoint (custom tracking)
- Removed unused analytics.ts file
- Removed data/hits.json (no longer needed)

To enable: Add environment variables in Vercel Dashboard and redeploy.
Shows 0 views gracefully if not configured yet.

Author: wbfossadmin

.env.example

@@ -15,5 +15,12 @@ WEBHOOK_SECRET=
 # Used to secure the /api/ping-sitemap endpoint
 ADMIN_API_KEY=
 
+# Vercel Analytics (optional - for page view tracking)
+# Get these from: Vercel Dashboard → Settings → Tokens
+# API Documentation: https://vercel.com/docs/rest-api/endpoints/analytics
+VERCEL_ACCESS_TOKEN=
+VERCEL_TEAM_ID=
+VERCEL_PROJECT_ID=
+
 # Site URL (for sitemaps)
 SITE_URL=https://fossradar.in

app/api/analytics/[slug]/route.ts

@@ -0,0 +1,95 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export const runtime = "edge";
+
+interface VercelAnalyticsResponse {
+  views: number;
+}
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  try {
+    const { slug } = await params;
+
+    // Vercel Analytics Web Vitals API
+    // Docs: https://vercel.com/docs/analytics/package
+    const token = process.env.VERCEL_ACCESS_TOKEN;
+    const teamId = process.env.VERCEL_TEAM_ID;
+    const projectId = process.env.VERCEL_PROJECT_ID;
+
+    if (!token || !projectId) {
+      // Analytics not configured, return 0
+      return NextResponse.json({
+        slug,
+        views: 0,
+        source: "unconfigured",
+      }, {
+        headers: {
+          "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=7200",
+        },
+      });
+    }
+
+    // Construct Vercel Analytics API URL
+    const apiUrl = teamId
+      ? `https://api.vercel.com/v1/analytics/views`
+      : `https://api.vercel.com/v1/analytics/views`;
+
+    const url = new URL(apiUrl);
+    if (teamId) url.searchParams.set("teamId", teamId);
+    url.searchParams.set("projectId", projectId);
+    url.searchParams.set("path", `/projects/${slug}`);
+    url.searchParams.set("since", "0"); // All time
+
+    const response = await fetch(url.toString(), {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    if (!response.ok) {
+      console.error("Vercel Analytics API error:", response.status, response.statusText);
+
+      // Return 0 for now, can be configured later
+      return NextResponse.json({
+        slug,
+        views: 0,
+        source: "api-error",
+        error: response.statusText,
+      }, {
+        headers: {
+          "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=7200",
+        },
+      });
+    }
+
+    const data = await response.json();
+    const views = data.total || data.views || 0;
+
+    return NextResponse.json({
+      slug,
+      views,
+      source: "vercel-analytics",
+    }, {
+      headers: {
+        "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=7200",
+      },
+    });
+  } catch (error) {
+    console.error("Error fetching analytics:", error);
+
+    const { slug } = await params;
+    return NextResponse.json({
+      slug,
+      views: 0,
+      source: "error",
+    }, {
+      status: 200, // Don't fail, just return 0
+      headers: {
+        "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=7200",
+      },
+    });
+  }
+}

app/api/hits/route.ts

@@ -1,62 +1,53 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { TrendingUp, Eye } from "lucide-react";
+import { TrendingUp, Eye, BarChart3 } from "lucide-react";
 
 interface PageViewsCardProps {
   slug: string;
 }
 
+interface AnalyticsData {
+  slug: string;
+  views: number;
+  source: string;
+}
+
 export function PageViewsCard({ slug }: PageViewsCardProps) {
-  const [hits, setHits] = useState<number | null>(null);
+  const [data, setData] = useState<AnalyticsData | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const trackHit = async () => {
+    const fetchAnalytics = async () => {
       try {
-        // Increment hit count
-        const response = await fetch("/api/hits", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ slug }),
+        const response = await fetch(`/api/analytics/${slug}`, {
+          cache: "force-cache", // Use CDN cache
         });
 
         if (response.ok) {
-          const data = await response.json();
-          setHits(data.hits);
+          const analyticsData = await response.json();
+          setData(analyticsData);
         } else {
-          // If POST fails, try GET
-          const getResponse = await fetch(`/api/hits?slug=${slug}`, {
-            cache: "no-store",
+          // Fallback to 0 views
+          setData({
+            slug,
+            views: 0,
+            source: "error",
           });
-          if (getResponse.ok) {
-            const data = await getResponse.json();
-            setHits(data.hits);
-          }
         }
       } catch (error) {
-        console.error("Error tracking hit:", error);
-        // Fallback: try to get current hits without incrementing
-        try {
-          const response = await fetch(`/api/hits?slug=${slug}`, {
-            cache: "no-store",
-          });
-          if (response.ok) {
-            const data = await response.json();
-            setHits(data.hits);
-          }
-        } catch {
-          // Silent fail - set to 0 to show something
-          setHits(0);
-        }
+        console.error("Error fetching analytics:", error);
+        setData({
+          slug,
+          views: 0,
+          source: "error",
+        });
       } finally {
         setLoading(false);
       }
     };
 
-    trackHit();
+    fetchAnalytics();
   }, [slug]);
 
   if (loading) {
@@ -73,10 +64,13 @@ export function PageViewsCard({ slug }: PageViewsCardProps) {
     );
   }
 
-  if (hits === null) {
+  if (!data) {
     return null;
   }
 
+  const views = data.views || 0;
+  const isAnalyticsConfigured = data.source === "vercel-analytics";
+
   return (
     <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-800 bg-gradient-to-br from-purple-50 to-blue-50 dark:from-purple-900/20 dark:to-blue-900/20 border-purple-200 dark:border-purple-800">
       <div className="flex items-center gap-2 text-purple-600 dark:text-purple-400 text-sm mb-1">
@@ -85,15 +79,24 @@ export function PageViewsCard({ slug }: PageViewsCardProps) {
       </div>
       <div className="flex items-baseline gap-2">
         <div className="text-3xl font-bold text-purple-900 dark:text-purple-100">
-          {hits.toLocaleString()}
+          {views.toLocaleString()}
         </div>
         <div className="text-sm text-purple-600 dark:text-purple-400">
-          lifetime {hits === 1 ? "view" : "views"}
+          all-time {views === 1 ? "view" : "views"}
         </div>
       </div>
       <div className="mt-2 flex items-center gap-1 text-xs text-purple-600 dark:text-purple-400">
-        <Eye className="h-3 w-3" />
-        <span>Tracked since launch</span>
+        {isAnalyticsConfigured ? (
+          <>
+            <BarChart3 className="h-3 w-3" />
+            <span>Powered by Vercel Analytics</span>
+          </>
+        ) : (
+          <>
+            <Eye className="h-3 w-3" />
+            <span>Analytics being configured...</span>
+          </>
+        )}
       </div>
     </div>
   );