Fonctionnalités avancées Next.js
Image optimization, Font optimization, Script optimization, analytics, edge runtime, experimental features
1Quel est l'avantage principal d'utiliser next/image par rapport à une balise img standard ?
Quel est l'avantage principal d'utiliser next/image par rapport à une balise img standard ?
Réponse
next/image optimise automatiquement les images en générant plusieurs tailles et formats modernes (WebP, AVIF), applique le lazy loading par défaut, et améliore les Web Vitals en évitant le Cumulative Layout Shift grâce au calcul automatique des dimensions. Contrairement à une balise img standard qui charge l'image originale, next/image sert la taille optimale selon le viewport et le device pixel ratio. Cette approche réduit significativement le temps de chargement et la bande passante consommée.
2Quand utiliser la propriété priority sur un composant next/image ?
Quand utiliser la propriété priority sur un composant next/image ?
Réponse
La propriété priority désactive le lazy loading et précharge l'image immédiatement, ce qui est crucial pour les images above-the-fold qui impactent le Largest Contentful Paint (LCP). Sans priority, ces images critiques seraient chargées avec lazy loading, retardant ainsi le LCP et dégradant les Core Web Vitals. Utiliser priority uniquement pour 1-2 images visibles au chargement initial de la page, typiquement les hero images ou bannières principales.
3Quelle configuration next/image permet de servir des images depuis un domaine externe ?
Quelle configuration next/image permet de servir des images depuis un domaine externe ?
Réponse
La propriété remotePatterns dans next.config.js permet de définir les domaines externes autorisés pour servir des images, avec un contrôle granulaire sur le protocole, hostname, port et pathname. Cette approche remplace l'ancienne propriété domains (deprecated) et offre une sécurité renforcée en limitant précisément les sources autorisées. Configurer remotePatterns évite les erreurs 400 lors du chargement d'images hébergées sur des CDN ou services tiers comme Cloudinary ou AWS S3.
Quelle est la différence entre fill et responsive pour le sizing de next/image ?
Comment optimiser les images statiques importées localement avec next/image ?
+21 questions d'entretien
Autres sujets d'entretien React / Next.js
Les bases de JavaScript
Fondamentaux React
React Hooks
Cycle de vie des composants
React Router
Gestion d'état avec Context
Formulaires & Composants contrôlés
Fetching de données & API
React Query (TanStack Query)
Styling & CSS-in-JS
Fondamentaux Next.js
TypeScript avec React
Data Fetching Next.js
Server Actions Next.js
Routing & Navigation Next.js
API Routes Next.js
Metadata & SEO Next.js
Middleware & Auth Next.js
Testing React
Zustand State Management
Optimisation Performance React
Error Boundaries & Error Handling
Advanced React Patterns
Déploiement & Production Next.js
Architecture & Design Patterns
React Server Components
Internationalisation Next.js
Sécurité & Best Practices React
Maîtrise React / Next.js pour ton prochain entretien
Accède à toutes les questions, flashcards, tests techniques, exercices de code review et simulateurs d'entretien.
Commencer gratuitement