Next.js performanse u produkciji — 8 optimizacija koje odmah rade

Next.js je odličan framework ali ne optimizuje sajt automatski. Loša konfiguracija Image komponente, nepotreban 'use client' na cijelim sekcijama i nedostatak cache headers-a mogu dovesti do LCP-a od 4+ sekunde čak i na dobrom hostingu.

Image optimizacija: koristite `next/image` za sve slike iznad folda, postavite `priority` prop na hero sliku, i koristite `sizes` prop koji odgovara stvarnoj veličini prikaza (ne default 100vw). Format: Next.js automatski servira AVIF i WebP ako ste uključili `formats: ['image/avif', 'image/webp']` u `next.config`. Font optimizacija: `next/font/google` ili `next/font/local` sa `display: 'swap'` eliminišu layout shift uzrokovan fontovima.

Server Components su default u Next.js App Router — koristite 'use client' samo za komponente koje zahtijevaju interaktivnost (useState, useEffect, event handlers). Greška broj jedan: označavanje cijele stranice ili layouta kao client komponente zbog jednog dugmeta. Rješenje: izolujte interaktivne dijelove u manje client komponente.

Bundle size: analizirajte sa `@next/bundle-analyzer`. Framer Motion, Chart.js, date-fns i slični paketi mogu dodati 200KB+. Koristite `dynamic()` import sa `{ ssr: false }` za heavy komponente koje nisu vidljive odmah (modal, grafikon, mapa). Rezultat: manji initial bundle, brži FCP.

Cache headers: Next.js ne postavlja agresivne cache headere automatski. Za statičke asete (slike, fontove) dodajte `Cache-Control: public, max-age=31536000, immutable`. Za API routes — postavite `revalidate` u Server Components ili koristite ISR za stranice koje se rijetko mijenjaju. Feather Studio gradi Next.js sajtove sa production-grade performansama kao standardom — pogledajte reference ili nas kontaktirajte.