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