Comment servez-vous les ressources statiques dans Next.js?

Question

Accepted Answer

Next.js sert les fichiers statiques (images, polices, icônes, PDFs, robots.txt) depuis le dossier spécial public/ à la racine de votre projet.

Le dossier public mappe à la racine de l'URL

text

public/
  logo.png          → served at  /logo.png
  favicon.ico       → served at  /favicon.ico
  docs/guide.pdf    → served at  /docs/guide.pdf
  robots.txt        → served at  /robots.txt

Un fichier à est disponible à l'URL — la partie est supprimée. Référencez-les avec un chemin absolu depuis la racine :

Download guide ); } ``` ## public/ vs importer des ressources ```tsx // Option A: from public/ — referenced by URL string

// Option B: imported — bundled, hashed for caching, dimensions inferred import logo from "./logo.png";

// width/height come from the import automatically ``` **Les images importées** obtiennent un nom de fichier avec hash de contenu (excellent cache long terme) et Next peut déduire leurs dimensions. Utilisez `public/` pour les fichiers référencés par une URL stable (favicon, robots.txt, og-images, téléchargeables) et **les imports** pour les images utilisées directement dans les composants. ## Avertissements - Seuls les fichiers présents au moment du **build** sont servis — `public/` n'est pas une destination de téléchargement à l'exécution. - N'y mettez pas de secrets — tout dans `public/` est accessible publiquement par URL. ## Pourquoi c'est important Le dossier `public/` est le moyen simple basé sur les conventions pour servir des fichiers statiques dans Next.js (favicons, robots.txt, images OG, téléchargements). Savoir que son contenu mappe à la racine de l'URL — et quand préférer importer une ressource (hashée, cacheable, auto-dimensionnée) par rapport à la référencer depuis `public/` — couvre les besoins quotidiens en ressources statiques.