Performance

Next.js Performance

Systematic approach to optimizing Next.js applications.

Performance Dimensions

1. Rendering Strategy

Pick the right strategy per route:

Rule of thumb: Static by default, dynamic by necessity.

2. Bundle Optimization

# Analyze bundle
ANALYZE=true npm run build

# Check individual package size
npx cost-of-modules

Key areas:

• Dynamic imports for heavy components (next/dynamic)
• Tree-shake unused imports
• Avoid barrel exports (index.ts re-exports hurt tree-shaking)
• Use react-compiler where possible

import dynamic from 'next/dynamic'
const HeavyChart = dynamic(() => import('./heavy-chart'), {
  loading: () => <ChartSkeleton />
})

3. Image Optimization

Use next/image everywhere:

import Image from 'next/image'

// ✅ Good: automatic optimization, lazy loading, correct sizing
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority          // Use for above-the-fold images
  sizes="100vw"     // Responsive: fills viewport width
/>

Rules:

• Always provide width and height (prevents layout shift)
• Use priority for LCP images (hero, main banner)
• Use sizes for responsive images
• Host images on a CDN (or use remote patterns)

4. Font Optimization

// app/layout.tsx
import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',  // Prevent FOIT
})

• Always use next/font (self-hosts, eliminates external requests)
• Use display: 'swap' for better perceived performance

5. Core Web Vitals Checklist

6. Route Segment Optimization

// Good: colocate data fetching with the segment that needs it
app/
  blog/
    page.tsx              // fetch blog list
    [slug]/
      page.tsx            // fetch single post
      loading.tsx         // segment-level loading state

• Each segment can have its own loading.tsx (streaming boundary)
• Long page + slow section → extract into page.tsx with <Suspense>

Measurement

# Local Lighthouse
npx @next/codemod@latest optimize

# Production monitoring
# Vercel Analytics / Speed Insights — enable in dashboard

Checklist

• Correct rendering strategy per route (static > ISR > dynamic > streaming)
• Hero image has priority and explicit dimensions
• No layout shift from dynamic content (set height/width placeholders)
• Heavy components lazy-loaded with next/dynamic
• Font uses next/font with display: 'swap'
• No barrel exports in component directories
• Loading states with loading.tsx or Suspense boundaries
• Vercel Speed Insights enabled for production monitoring