El rendimiento no es opcional: es una funcionalidad. Aquí tienes consejos probados para optimizar apps de Next.js.

2. Optimiza las imágenes

Usa siempre next/image

import Image from 'next/image';

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

4. Implementa un caché adecuado

Estrategia	Caso de uso	TTL
`force-cache`	Datos estáticos	Para siempre
`revalidate: 3600`	Semiestáticos	1 hora
`revalidate: 60`	Actualizados con frecuencia	1 minuto
`no-store`	Datos en tiempo real	Nunca cachear

5. Minimiza los Client Components

Cada directiva 'use client' suma a tu bundle de JavaScript. Mantén los componentes de cliente pequeños y enfocados:

6. Análisis del bundle

# Install analyzer
npm install @next/bundle-analyzer

# Run analysis
ANALYZE=true npm run build

10 consejos de rendimiento de Next.js para apps en producción

2. Optimiza las imágenes

4. Implementa un caché adecuado

5. Minimiza los Client Components

6. Análisis del bundle