Next.js Performance Optimization Guide

The biggest performance win in Next.js 14+: use server components by default. Server components run on the server and send HTML to the browser - no JavaScript downloaded. Only add 'use client' when you need interactivity (useState, onClick, useEffect). Most AI tools over-use 'use client', sending unnecessary JavaScript to the browser.

Use the next/image component for all images. It automatically serves the right size for each device, uses modern formats (WebP, AVIF), lazy loads images below the fold, and prevents layout shift. Replace <img> tags with <Image> from 'next/image'. Set width, height, and alt attributes. Use priority prop for above-the-fold images.

Next.js automatically splits code per route - each page only loads the JavaScript it needs. But if you import heavy libraries in a shared layout, every page pays the cost. Move heavy imports (chart libraries, rich text editors) to the specific pages that use them, or use dynamic imports with next/dynamic.

Slow database queries are the most common backend performance issue. Add indexes on columns you filter, sort, or join on. Select only the columns you need. Paginate all list queries. Use connection pooling to avoid the overhead of creating new connections. Consider edge caching for data that doesn't change frequently.

Use Vercel Analytics or Lighthouse for Core Web Vitals. Focus on LCP (Largest Contentful Paint - how fast the main content appears), FID (First Input Delay - how fast the page responds to interaction), and CLS (Cumulative Layout Shift - visual stability). These metrics directly affect your Google search ranking.