Ressources statiques dans le répertoire `public`

Next.js peut servir des fichiers statiques, comme des images, dans un dossier appelé public à la racine du projet. Les fichiers 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 (Caching)

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 comme robots.txt, favicon.ico, etc., vous devriez utiliser des fichiers de métadonnées spéciaux dans le dossier app.

Bon à savoir :

• Le répertoire doit s'appeler public. Ce nom ne peut pas être modifié et c'est le seul répertoire utilisé pour servir des ressources statiques.
• Seules les ressources présentes dans le répertoire public au moment du build seront servies par Next.js. Les fichiers ajoutés au moment de la requête ne seront pas disponibles. Nous recommandons d'utiliser un service tiers comme Vercel Blob pour le stockage persistant de fichiers.