Cara Marketer Indonesia Pasang CrUX API di Next.js untuk Dashboard Monitoring Core Web Vitals Mingguan 2026

TL;DR: CrUX Dashboard public hanya update bulanan, padahal Core Web Vitals jadi sinyal ranking yang dinilai p75 28 hari. Pakai CrUX API di Next.js Route Handler untuk fetch data harian dan render dashboard internal mingguan. Setup butuh API key Google Cloud (gratis) dan kira-kira 60 baris kode.

Bulan Maret 2026, salah satu klien personal branding kami bertanya: "Kenapa skor Core Web Vitals di Google Search Console beda dengan PageSpeed Insights?". Jawabannya sederhana. PageSpeed Insights menampilkan field data CrUX yang ter-cache sampai 24 jam, sementara Search Console pakai data agregat yang lebih lambat update. Untuk monitor mingguan yang akurat, jalannya langsung ke sumber: CrUX API.

Kenapa CrUX API, Bukan PageSpeed Insights API?

PageSpeed Insights API membungkus lab data Lighthouse dan field data CrUX. Untuk dashboard monitoring murni, kita cuma butuh field data, dan CrUX API jauh lebih cepat dan punya struktur response yang lebih sederhana.

Setup di Next.js 15

Langkah 1, dapatkan API key dari Google Cloud Console. Aktifkan "Chrome UX Report API" di project Anda dan generate API key tanpa restriction (atau restrict ke IP server jika sudah deploy).

Langkah 2, simpan di environment variable Vercel:

CRUX_API_KEY=AIza...

Langkah 3, buat Route Handler di app/api/crux/route.ts:

import { NextResponse } from 'next/server';

export const revalidate = 86400; // cache 24 jam

export async function GET(req: Request) {
  const url = new URL(req.url).searchParams.get('url');
  if (!url) return NextResponse.json({ error: 'url required' }, { status: 400 });

  const res = await fetch(
    `https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=${process.env.CRUX_API_KEY}`,
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        url,
        formFactor: 'PHONE',
        metrics: ['largest_contentful_paint', 'interaction_to_next_paint', 'cumulative_layout_shift'],
      }),
      next: { revalidate: 86400 },
    }
  );

  const data = await res.json();
  return NextResponse.json(data);
}

Langkah 4, render dashboard. Bisa pakai Recharts atau tabel HTML biasa, tergantung kompleksitas. Untuk monitoring mingguan, tabel sederhana yang refresh tiap Senin pagi sudah cukup.

Studi Kasus: Dashboard Aris Setiawan

Aris Setiawan, klien personal branding, butuh tahu skor Core Web Vitals untuk 8 halaman pillar setiap minggu. Sebelumnya dia cek manual via PageSpeed Insights, butuh 15 menit per halaman.

Kami pasang Route Handler di atas, plus cron job harian via Vercel yang fetch 8 URL dan simpan ke Supabase. Dashboard internal di-render dari On-Demand ISR dengan revalidateTag('crux-weekly'). Hasilnya: monitoring 8 halaman sekarang butuh 0 menit waktu manual per minggu, dengan history 12 bulan ter-archive otomatis.

Praktik standar di industri menunjukkan bahwa monitoring mingguan cukup untuk situs di bawah 100.000 sesi per bulan. Untuk situs dengan traffic lebih tinggi, kombinasikan dengan web-vitals library untuk attribution data real-time. Referensi resmi: dokumentasi CrUX API.

Pertanyaan Umum

Berapa quota CrUX API gratis?

150 query per menit, cukup untuk dashboard internal dengan ratusan URL.

Kenapa beberapa URL return "no data"?

URL butuh minimum traffic Chrome users opt-in dalam 28 hari. Halaman baru atau low-traffic biasanya belum punya cukup sample.

Bisa pakai CrUX API untuk benchmark kompetitor?

Bisa. CrUX adalah data publik dari pengguna Chrome opt-in. Anda bisa query URL kompetitor untuk benchmark p75 LCP, INP, dan CLS mereka.

Apakah perlu domain sudah ter-index Google?

Tidak. CrUX agregat data dari Chrome users, bukan dari Search index. Domain baru pun bisa di-query asal punya traffic Chrome cukup.

Penutup

Monitoring Core Web Vitals tidak harus pakai tool berbayar. CrUX API gratis, response cepat, dan terintegrasi mudah di Next.js. Untuk situs personal brand atau bisnis kecil-menengah Indonesia, kombinasi CrUX API mingguan plus web-vitals library real-time sudah memberi visibility yang cukup untuk pengambilan keputusan optimasi.