Ressources statiques

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

Le dossier est également utile pour robots.txt, favicon.ico, la vérification Google Site, et tout autre fichier statique (y compris .html). Mais assurez-vous de ne pas avoir un fichier statique avec le même nom qu'un fichier dans le répertoire pages/, car cela générera une erreur. En savoir plus.

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.