Core Web Vitals autohospedados con Next.js, Vercel y PlanetScale

Informe de Lighthouse con las métricas Core Web Vitals: First Contentful Paint, Speed Index, Largest Contentful Paint, Time to Interactive, Total Blocking Time y Cumulative Layout Shift

RESUMEN

Métricas web autohospedadas gratuitas con Next.js, Vercel y PlanetScale.

Cómo se guardan las web vitals: una página Next.js las envía a una ruta API en Vercel, que las guarda en PlanetScale con Prisma

Configurar Prisma

Instala las dependencias de prisma:

npm install @prisma/client
npm i -D prisma

Agrega el script de postinstalación de prisma en el archivo packcage.json:

"scripts": {
    ...
    "postinstall": "prisma generate"
  },