Next.js: 3 Trucchi per il Turbo

Nel mondo del web moderno, la velocità non è solo una "feature": è il requisito fondamentale. Un sito che impiega più di 3 secondi a caricare perde oltre il 50% dei visitatori. Con Next.js, abbiamo un framework potente, ma "da grandi poteri derivano grandi responsabilità". Ecco tre trucchi essenziali per mettere il turbo alla tua applicazione Next.js 15+ (con TurboPack).

1. Immagini: Il Tuo Miglior Alleato (o Peggior Nemico)

Le immagini non ottimizzate sono la causa numero uno dei siti lenti. Non caricare mai un'immagine 4K per visualizzarla in un box di 300px. È come usare un tir per consegnare una lettera.

La Soluzione Next.js: Usa sempre il componente <Image />.

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero Image"
  width={800}
  height={600}
  priority // Carica immediatamente se è "above the fold"
  placeholder="blur" // Effetto caricamento elegante
/>

Questo componente fa il lavoro sporco per te: converte automaticamente in formati moderni (WebP, AVIF), ridimensiona in base al dispositivo dell'utente e previene il Content Layout Shift (CLS).

2. Code Splitting & Dynamic Imports: La Dieta Dimagrante

Perché inviare all'utente tutto il codice del sito se sta visitando solo la Homepage? Scaricare librerie enormi per componenti che l'utente potrebbe non vedere mai è uno spreco di banda e tempo.

La Soluzione: Usa next/dynamic per caricare componenti pesanti solo quando servono (Lazy Loading).

import dynamic from 'next/dynamic';

// Carica questo componente solo quando viene renderizzato
const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <p>Caricamento grafico...</p>,
  ssr: false // Se non serve server-side (es. dipende da window)
});

Perfetto per modali, grafici complessi o mappe interattive.

3. Server Components vs Client Components: Architettura Intelligente

In Next.js 13+ (App Router), ogni componente è Server Component di default. Questo significa che il browser riceve HTML puro, già "cucinato", senza dover eseguire JavaScript pesante.

Il Problema: Molti sviluppatori trasformano tutto in Client Component ('use client') per abitudine o per usare useState ovunque.

La Regola d'Oro:

• Usa Server Components per: recuperare dati (fetch), accedere al database, logica segreta (API keys).
• Usa Client Components solo per: interattività (click, scroll), stato locale (useState, useEffect), hook del browser (usePathname).

Spostare la logica pesante sul server riduce drasticamente il bundle JavaScript che l'utente deve scaricare ed eseguire. Meno JS = Tempo di interactiva (TTI) istantaneo.

---

La performance non è magia nera, è disciplina ingegneristica. Applicando questi tre principi, non stai solo ottimizzando il codice: stai rispettando il tempo dei tuoi utenti.