Rendimiento en Next.js: diez cosas que sí notas en producción

El rendimiento no es un extra: es parte del producto. Estas ideas las he ido usando en apps Next que tenían que aguantar tráfico real sin volverse lentas de golpe.

1. Imágenes con cabeza

Usa siempre next/image para tamaños correctos, lazy load y LCP más sano.

import Image from 'next/image';

export function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Imagen principal"
      width={1200}
      height={600}
      priority
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
    />
  );
}

2. Caché que encaje con los datos

3. Pocos componentes cliente

Cada 'use client' suma JavaScript al bundle. Mantén los client components pequeños y con un propósito claro.

4. Mira el bundle

npm install @next/bundle-analyzer

ANALYZE=true npm run build

Cierre

Mide, cambia una cosa, vuelve a medir. El rendimiento es hábito, no un parche del viernes.