Come servire asset statici in Next.js?

Question

Accepted Answer

Next.js serve file statici (immagini, font, icone, PDF, robots.txt) dalla cartella speciale public/ nella radice del tuo progetto.

Perché è importante

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 file in è disponibile all'URL — la parte viene eliminata. Fai riferimento ad essi con un percorso assoluto dalla radice:

Download guide ); } ``` ## public/ vs importazione di asset ```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 ``` Le immagini **importate** ottengono un filename con hash dei contenuti (ottimo per il caching a lungo termine) e Next.js può dedurre le loro dimensioni. Usa `public/` per file referenziati da URL stabili (favicon, robots.txt, og-images, file scaricabili) e **import** per immagini utilizzate direttamente nei componenti. ## Avvertenze - Solo i file presenti al **build time** vengono serviti — `public/` non è una destinazione di upload a runtime. - Non mettere segreti lì — tutto in `public/` è pubblicamente accessibile via URL. ## Perché è importante La cartella `public/` è il modo semplice, basato su convenzioni, per servire file statici in Next.js (favicon, robots.txt, immagini OG, download). Sapere che i suoi contenuti mappano alla radice dell'URL — e quando preferire importare un asset (con hash, cacheable, auto-dimensionato) rispetto a referenziarlo da `public/` — copre le esigenze quotidiane di asset statici.