Dossier public

Next.js peut servir des fichiers statiques, comme des images, à partir d'un dossier appelé public à la racine du projet. Les fichiers situés dans public peuvent ensuite être référencés dans votre code à partir de l'URL de base (/).

Par exemple, le fichier public/avatars/me.png peut être visualisé en accédant au chemin /avatars/me.png. Le code pour afficher cette image pourrait ressembler à :

import Image from 'next/image'

export function Avatar({ id, alt }) {
  return <Image src={`/avatars/${id}.png`} alt={alt} width="64" height="64" />
}

export function AvatarOfMe() {
  return <Avatar id="me" alt="Un portrait de moi" />
}

Mise en cache

Next.js ne peut pas mettre en cache de manière sûre les ressources dans le dossier public car elles peuvent changer. Les en-têtes de cache appliqués par défaut sont :

Cache-Control: public, max-age=0

Robots, Favicons et autres

Pour les fichiers de métadonnées statiques, tels que robots.txt, favicon.ico, etc., vous devriez utiliser les fichiers de métadonnées spéciaux dans le dossier app.