nextjs-performance-optimization

Next.js Performance Optimization Rules

🚀 PERFORMANCE PATTERNS (From Sprint 10 Architecture Review)

Based on comprehensive analysis of the frontend application and performance bottlenecks identified during Sprint 10.

⚡ IMAGE OPTIMIZATION - CRITICAL

1. Use Next.js Image Component (Not Chakra Image)

// ❌ NEVER: Bypasses Next.js optimization
import { Image } from '@chakra-ui/react'
<Image src="/api/v1/images/123/thumbnail" alt="..." />

// ✅ ALWAYS: Use Next.js optimized images
import NextImage from 'next/image'
<NextImage 
  src="/api/v1/images/123/thumbnail"
  alt="..."
  width={300}
  height={300}
  style={{ objectFit: 'cover' }}
  priority={isAboveTheFold}
/>

2. Configure Image Domains in next.config.ts

// ✅ MANDATORY: Whitelist backend domains
const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '8002',
        pathname: '/api/v1/images/**',
      },
      {
        protocol: 'https',
        hostname: process.env.NEXT_PUBLIC_API_HOST || 'api.example.com',
        pathname: '/api/v1/images/**',
      },
    ],
  },
}

3. Image Loading Strategies

// ✅ Search results grid optimization
<NextImage
  src={`/api/v1/images/${result.id}/thumbnail`}
  alt={result.payload.filename}
  width={300}
  height={300}
  style={{ objectFit: 'cover' }}
  loading="lazy"           // Lazy load below fold
  placeholder="blur"       // Show blur while loading
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ..." // Tiny base64
/>

// ✅ Hero images - load immediately
<NextImage
  src="/hero-image.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority={true}          // Load immediately
  quality={90}             // Higher quality for hero
/>

🔄 COMPONENT RE-RENDER OPTIMIZATION

1. Break Down "God Components" (Sprint 10 Lesson)

// ❌ PROBLEM: 424-line HomePage causes full re-renders
export default function HomePage() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])
  const [loading, setLoading] = useState(false)
  // ... 400+ more lines
}

// ✅ SOLUTION: Extract into focused components
export default function HomePage() {
  return (
    <Box>
      <SearchSection />
      <ResultsSection />
      <StatusSection />
    </Box>
  )
}

// ✅ Each component manages only its own state
function SearchSection() {
  const [query, setQuery] = useState('')
  // Only re-renders when query changes
}