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