SEO၊ Logs နှင့် Web Vitals

Deploy လုပ်ပြီးနောက် user တစ်ယောက်မှာ error တက်တာကို သူပြောမှသိရင် ပြင်ရနောက်ကျပါတယ်။ Production app တစ်ခုမှာ search engine အတွက် metadata နဲ့ developer အတွက် logs/metrics နှစ်မျိုးလုံးလိုပါတယ်။

နားလည်ထားရမယ့် အချက်

Title၊ description၊ canonical URL၊ sitemap၊ robots နဲ့ Open Graph image ကို route structure နဲ့ကိုက်ညီအောင်ထားပါ။ Error log မှာ request context နဲ့ error digest လို debugging အတွက်လိုတာထည့်ပေမယ့် password၊ token၊ cookie နဲ့ personal content ကို မထည့်ပါနဲ့။ useReportWebVitals သို့မဟုတ် hosting provider analytics ဖြင့် LCP၊ INP နဲ့ CLS ကို real user များဆီက စောင့်ကြည့်ပြီး release မတိုင်မီနဲ့ပြီးနောက် နှိုင်းယှဉ်ပါ။

အတူတူ စမ်းရေးကြည့်မယ်

"use client";
import { useReportWebVitals } from "next/web-vitals";

export function WebVitals() {
  useReportWebVitals((metric) => {
    navigator.sendBeacon(
      "/api/vitals",
      JSON.stringify({ name: metric.name, value: metric.value }),
    );
  });
  return null;
}

Code က ဘယ်လိုအလုပ်လုပ်သလဲ

WebVitals component က browser မှ metric တစ်ခုချင်းရလာချိန် analytics endpoint ဆီပို့နိုင်ပါတယ်။ Production မှာ sampling၊ retry နဲ့ privacy policy ကိုထပ်စဉ်းစားရပါမယ်။

Browser မှ Web Vital metrics များကို monitoring endpoint သို့ပို့နိုင်မည်။

Next.js — Production Checklist — Next.js