---
title: "10 Next.js Performance Tips for Production Apps"
publishedAt: "2024-12-05"
updatedAt: "2024-12-05"
author: "John Doe"
summary: "Practical optimization techniques to make your Next.js applications blazing fast in production."
image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=192&fit=crop"
---

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`

```tsx
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

```bash title="terminal"
# Install analyzer
npm install @next/bundle-analyzer

# Run analysis
ANALYZE=true npm run build
```