Vercel Analytics + Speed Insights: observabilidad sin cookies ni consent

Contexto

Necesitaba metricas reales de performance y uso del portfolio deployado en Vercel, pero no queria agregar cookie banners ni preocuparme por GDPR.

Lo que aprendi

Vercel ofrece dos componentes complementarios que se agregan como componentes React en el layout:

// app/layout.tsx
import { Analytics } from "@vercel/analytics/next";
import { SpeedInsights } from "@vercel/speed-insights/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

Que hace cada uno

Componente	Package	Metricas
`<Analytics />`	`@vercel/analytics`	Page views, visitantes, referrers, top pages, paises
`<SpeedInsights />`	`@vercel/speed-insights`	Core Web Vitals reales (LCP, FID, CLS, TTFB, INP)

Por que no necesita cookie banner

Sin cookies: ambos usan hashing de datos anonimos, no cookies ni local storage
Sin tracking cross-site: no siguen al usuario entre sitios
Privacy-friendly: los datos son agregados, no individuales
Cumple EU/GDPR: no requiere consent banner

Instalacion

pnpm add @vercel/analytics @vercel/speed-insights

Importar de @vercel/analytics/next y @vercel/speed-insights/next (no del path raiz) -- esto optimiza para el framework.

Gotcha