Performance isn't optional—it's a feature. Here are battle-tested tips for optimizing Next.js apps.

2. Optimize Images

Always use 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. Implement Proper Caching

| Strategy | Use Case | TTL | |----------|----------|-----| | force-cache | Static data | Forever | | revalidate: 3600 | Semi-static | 1 hour | | revalidate: 60 | Frequently updated | 1 minute | | no-store | Real-time data | Never cache |

5. Minimize Client Components

Every 'use client' directive adds to your JavaScript bundle. Keep client components small and focused:

6. Bundle Analysis

# Install analyzer
npm install @next/bundle-analyzer

# Run analysis
ANALYZE=true npm run build