A Next.js Performance Checklist We Use in Production

1. Leverage Server Components First

Keep client bundles minimal by rendering static sections on the server. Reserve "use client" strictly for leaves of the component tree that need browser events, state, or hooks.

2. Next.js Image Optimization

Always specify sizes on next/image components using fill. Without responsive sizes, the browser downloads desktop-resolution assets on mobile viewports:

<Image
  src="/hero.png"
  alt="Hero"
  fill
  sizes="(max-width: 768px) 100vw, 50vw"
  priority
/>

3. Tagged Cache & On-Demand Revalidation

Avoid arbitrary time-based revalidation when data updates unpredictably. Tag your backend queries with next: { tags: ['kpis', 'projects'] } and purge them precisely when modifications occur using revalidateTag().