Kako služite statičke resurse u Next.js?

Question

Accepted Answer

Next.js služi statičke datoteke (slike, fontove, ikone, PDFove, robots.txt) iz posebne public/ mape u korjenu vašeg projekta.

public mapa mapira na URL korijen

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

Datoteka na dostupna je na URL-u — dio je izbrisano. Referencirati ih s apsolutnom putanjom od korijena:

Download guide ); } ``` ## public/ naspram uvoza resursa ```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 ``` **Uvezene** slike dobivaju naziv datoteke sa hash-om sadržaja (odličan dugoročni cache) i Next može zaključiti njihove dimenzije. Koristite `public/` za datoteke koje se referenciraju stabilnim URL-om (favicon, robots.txt, og-images, preuzimanja) i **uvoze** za slike koje se koriste izravno u komponentama. ## Opasnosti - Samo datoteke prisutne tijekom **vremena gradnje** se serviraju — `public/` nije odredište za učitavanje pri izvršavanju. - Nemojte tamo stavljati tajne — sve u `public/` je javno dostupno putem URL-a. ## Zašto je to važno `public/` mapa je jednostavan, konvencijom utemeljen način da se služe statičke datoteke u Next.js-u (favicons, robots.txt, OG slike, preuzimanja). Znati da se njegov sadržaj mapira na URL korijen — i kada dati prednost uvozenju resursa (hash-irano, cache-abilno, auto-dimenzioniran) u odnosu na referenciranje iz `public/` — pokriva svakodnevne potrebe za statičkim resursima.