Hogyan szolgáltatnak statikus eszközöket a Next.js-ben?

Question

Accepted Answer

A Next.js statikus fájlokat (képek, betűtípusok, ikonok, PDF-ek, robots.txt) a projekt gyökerében lévő speciális public/ mappából szolgáltat.

A public mappa az URL gyökérhez van leképezve

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

A helyen lévő fájl az URL-en érhető el — a rész el van hagyva. Hivatkozzon rá az gyökértől számított abszolút elérési úttal:

Download guide ); } ``` ## public/ vs eszközök importálása ```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 ``` Az **importált** képek tartalmi hash-sel ellátott fájlnevet kapnak (kiváló hosszú távú gyorsítótárazás), és a Next meg tudja határozni a méreteiket. Használjon `public/`-t a stabil URL-rel hivatkozott fájlokhoz (favicon, robots.txt, og-images, letöltések) és **importokat** az összetevőkben közvetlenül használt képekhez. ## Figyelmeztetések - Csak a **fordítási időben** meglevő fájlok kerülnek kiszolgálásra — a `public/` nem futásidejű feltöltési cél. - Ne tegyen oda titkokat — a `public/`-ban lévő minden publikusan elérhető URL-en keresztül. ## Miért fontos A `public/` mappa az egyszerű, konvenció alapú módja a statikus fájlok kiszolgálásának a Next.js-ben (favicons, robots.txt, OG-képek, letöltések). Tudni, hogy a tartalma hogyan képezhető le az URL gyökérhez — és mikor érdemes egy eszközt importálni (hash-eli, gyorsítótárazható, automatikusan méretezett) az `public/`-ből való hivatkozás helyett — a mindennapi statikus eszköz igényeket takarja.