---
title: "Core Web Vitals for Next.js"
canonical: "https://lemwatch.com/monitor/nextjs/core-web-vitals"
framework: "Next.js"
concern: "Core Web Vitals"
last_verified: "2026-08-11"
source: "https://lemwatch.com"
---

# Core Web Vitals for Next.js

Field-data LCP, CLS, and INP tracking with regression alerts.

## Why this concern is different on Next.js

Next.js apps regress on INP first — heavy client components hydrated on scroll block the main thread long after LCP has already painted. Vercel Analytics reports p75 but hides the interaction that caused it; that's the gap we close.

## Signals to watch

- INP spikes after a deploy that adds a new client component to a shared layout
- LCP regression when next/image switches to unoptimised mode under load
- CLS from Google Fonts loaded via next/font/google without size-adjust

## What we check (universal)

- Largest Contentful Paint (LCP) — 75th percentile, tracked hourly
- Cumulative Layout Shift (CLS) — with the specific shifting element flagged
- Interaction to Next Paint (INP) — replaces FID for 2026 rankings
- Alerts fire when the 7-day rolling baseline degrades by >20%

## How Lemwatch helps on Next.js

We pull field data every hour and correlate regressions with your deploy events, so an INP jump maps back to a specific commit — not a vague 'performance is worse this week'.

_Canonical HTML page: https://lemwatch.com/monitor/nextjs/core-web-vitals_