Question 1

Qual è il principale vantaggio dell'utilizzo di next/image rispetto a un tag img standard?

Accepted Answer

next/image ottimizza automaticamente le immagini generando più dimensioni e formati moderni (WebP, AVIF), applica il lazy loading per impostazione predefinita e migliora le Web Vitals prevenendo il Cumulative Layout Shift tramite il calcolo automatico delle dimensioni. A differenza di un tag img standard che carica l'immagine originale, next/image serve la dimensione ottimale in base al viewport e al rapporto pixel del dispositivo. Questo approccio riduce significativamente il tempo di caricamento e il consumo di larghezza di banda.

Question 2

Quando usare la proprietà priority su un componente next/image?

Accepted Answer

La proprietà priority disabilita il lazy loading e precarica l'immagine immediatamente, il che è cruciale per le immagini above-the-fold che impattano il Largest Contentful Paint (LCP). Senza priority, queste immagini critiche verrebbero caricate in modo lazy, ritardando LCP e degradando i Core Web Vitals. Usa priority solo per 1-2 immagini visibili al caricamento iniziale della pagina, tipicamente hero images o banner principali.

Question 3

Quale configurazione di next/image consente di servire immagini da un dominio esterno?

Accepted Answer

La proprietà remotePatterns in next.config.js consente di definire i domini esterni autorizzati per servire immagini, con controllo granulare su protocollo, hostname, porta e pathname. Questo approccio sostituisce la proprietà domains (obsoleta) e offre una sicurezza migliorata limitando precisamente le fonti autorizzate. Configurare remotePatterns previene errori 400 durante il caricamento di immagini ospitate su CDN o servizi di terze parti come Cloudinary o AWS S3.

Funzionalità avanzate di Next.js

Qual è il principale vantaggio dell'utilizzo di next/image rispetto a un tag img standard?

Risposta

Quando usare la proprietà priority su un componente next/image?

Risposta

Quale configurazione di next/image consente di servire immagini da un dominio esterno?

Risposta

Qual è la differenza tra fill e responsive per il sizing di next/image?

Come ottimizzare le immagini statiche importate localmente con next/image?

Altri argomenti di colloquio React / Next.js

Fondamenti di JavaScript

Fondamenti di React

React Hooks

Ciclo di vita dei componenti

React Router

Gestione dello state con Context

Form e Controlled Components

Recupero dati e API

React Query (TanStack Query)

Styling & CSS-in-JS

Fondamentali di Next.js

TypeScript con React

Data Fetching in Next.js

Server Actions di Next.js

Routing e Navigazione in Next.js

API Routes di Next.js

Metadata & SEO in Next.js

Middleware e Auth in Next.js

Testing React

Zustand State Management

Ottimizzazione delle Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Deploy e Produzione con Next.js

Architecture & Design Patterns

React Server Components

Internazionalizzazione di Next.js

React Sicurezza & Best Practices

Padroneggia React / Next.js per il tuo prossimo colloquio