SEO, Logs, and Web Vitals

If you only find out about an error from a user telling you about it after deploy, you're already fixing it late. A production app needs both metadata for search engines and logs/metrics for developers.

The key idea

Keep title, description, canonical URL, sitemap, robots, and Open Graph image aligned with your route structure. In error logs, include what's needed for debugging like request context and the error digest — but never include passwords, tokens, cookies, or personal content. Use useReportWebVitals or your hosting provider's analytics to monitor LCP, INP, and CLS from real users, and compare before and after each release.

Let's try it together

"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;
}

How the code works

The WebVitals component can send each metric to an analytics endpoint as it arrives from the browser. In production, you'll also need to think about sampling, retries, and privacy policy.

The browser can send Web Vitals metrics to a monitoring endpoint.

Next.js — Production Checklist — Next.js