Cum servești activele statice în Next.js?

Question

Accepted Answer

Next.js servește fișiere statice (imagini, fonturi, pictograme, PDF-uri, robots.txt) din folderul special public/ de la rădăcina proiectului tău.

Folderul public mapează la rădăcina URL-ului

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 fișier la este disponibil la URL-ul — partea este eliminată. Fă-i referință cu o cale absolută de la rădăcină:

Download guide ); } ``` ## public/ vs importarea activelor ```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 ``` **Imaginile importate** primesc un nume de fișier cu hash de conținut (excelent pentru caching pe termen lung) și Next.js poate deduce dimensiunile lor. Folosește `public/` pentru fișiere la care se face referință printr-un URL stabil (favicon, robots.txt, imagini og, descărcări) și **importuri** pentru imagini folosite direct în componente. ## Avertismente - Doar fișierele prezente la **build time** sunt servite — `public/` nu este o destinație de încărcare în runtime. - Nu pune secrete acolo — totul în `public/` este accesibil public prin URL. ## De ce este important Folderul `public/` este modul simplu, bazat pe convenție, pentru a servi fișiere statice în Next.js (favicon-uri, robots.txt, imagini OG, descărcări). Știind că conținutul acestuia mapează la rădăcina URL-ului — și când să preferi importarea unui activ (hash, cache-abil, auto-dimensionat) în loc să-i faci referință din `public/` — acoperă nevoile zilnice de active statice.