Ressources statiques

Next.js peut servir des ressources statiques, comme des images, situées dans le répertoire public de premier niveau. Les fichiers à l'intérieur de public peuvent être référencés depuis la racine de l'application, de manière similaire aux pages.

Le répertoire public est également utile pour robots.txt, la vérification Google Site Verification et toute autre ressource statique. Consultez la documentation sur le service de fichiers statiques pour en savoir plus.

Télécharger votre photo de profil

Commencez par récupérer votre photo de profil.

• Téléchargez votre photo de profil au format .jpg (ou utilisez ce fichier).
• Créez un répertoire images à l'intérieur du répertoire public.
• Enregistrez l'image sous le nom profile.jpg dans le répertoire public/images.
• La taille de l'image peut être d'environ 400px par 400px.
• Vous pouvez supprimer le fichier SVG de logo inutilisé directement sous le répertoire public.

Image non optimisée

Avec du HTML classique, vous ajouteriez votre photo de profil comme suit :

<img src="/images/profile.jpg" alt="Your Name" />

Cependant, cela signifie que vous devez gérer manuellement :

• L'adaptation de votre image à différentes tailles d'écran
• L'optimisation de vos images avec un outil ou une bibliothèque tierce
• Le chargement des images uniquement lorsqu'elles entrent dans le viewport

Et bien plus encore. À la place, Next.js fournit un composant Image prêt à l'emploi pour gérer cela pour vous.

Composant Image et optimisation d'image

next/image est une extension de l'élément HTML <img>, évolué pour le web moderne.

Next.js prend également en charge l'optimisation d'image par défaut. Cela permet de redimensionner, optimiser et servir des images dans des formats modernes comme WebP lorsque le navigateur le supporte. Cela évite d'envoyer des images volumineuses à des appareils avec un viewport plus petit. Cela permet également à Next.js d'adopter automatiquement les futurs formats d'image et de les servir aux navigateurs qui les supportent.

L'optimisation automatique des images fonctionne avec n'importe quelle source d'image. Même si l'image est hébergée par une source de données externe, comme un CMS, elle peut toujours être optimisée.

Utilisation du composant Image

Au lieu d'optimiser les images au moment de la construction, Next.js optimise les images à la demande, lorsque les utilisateurs les demandent. Contrairement aux générateurs de sites statiques et aux solutions uniquement statiques, vos temps de construction n'augmentent pas, que vous livriez 10 images ou 10 millions d'images.

Les images sont chargées en différé (lazy loaded) par défaut. Cela signifie que la vitesse de votre page n'est pas pénalisée pour les images en dehors du viewport. Les images se chargent lorsqu'elles apparaissent dans le viewport.

Les images sont toujours rendues de manière à éviter le Cumulative Layout Shift, un Core Web Vital que Google va utiliser dans le classement des recherches.

Voici un exemple utilisant next/image pour afficher notre photo de profil. Les props height et width doivent correspondre à la taille de rendu souhaitée, avec un rapport d'aspect identique à celui de l'image source.

Remarque : Nous utiliserons ce composant plus tard dans "Polissage de la mise en page", inutile de le copier pour l'instant.

import Image from 'next/image';
 
const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Chemin du fichier image
    height={144} // Taille souhaitée avec le bon rapport d'aspect
    width={144} // Taille souhaitée avec le bon rapport d'aspect
    alt="Your Name"
  />
);

Pour en savoir plus sur l'optimisation automatique des images, consultez la documentation.

Pour en savoir plus sur le composant Image, consultez la référence API de next/image.