Jak serwujesz zasoby statyczne w Next.js?

Question

Accepted Answer

Next.js serwuje pliki statyczne (obrazy, czcionki, ikony, PDFy, robots.txt) ze specjalnego folderu public/ w katalogu głównym projektu.

public/ mapuje się na główny 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

Plik w jest dostępny pod adresem URL — część jest pomijana. Odwołuj się do nich za pomocą ścieżki bezwzględnej od katalogu głównego:

Download guide ); } ``` ## public/ vs importowanie zasobów ```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 ``` **Zaimportowane** obrazy otrzymują nazwę pliku ze skrótem zawartości (doskonałe do długoterminowego cachowania) i Next.js może wnioskować ich wymiary. Używaj `public/` do plików, do których odwołujesz się za pomocą stabilnego adresu URL (favicon, robots.txt, og-images, pliki do pobrania) i **importów** do obrazów używanych bezpośrednio w komponentach. ## Zastrzeżenia - Serwowane są tylko pliki obecne w **momencie kompilacji** — `public/` nie jest miejscem docelowym dla przesyłania w czasie wykonywania. - Nie umieszczaj tam sekretów — wszystko w `public/` jest publicznie dostępne przez URL. ## Dlaczego to ważne Folder `public/` to prosty, oparty na konwencji sposób na serwowanie plików statycznych w Next.js (favicons, robots.txt, OG images, pobieranie). Wiedzenie, że jego zawartość mapuje się na główny URL — i kiedy preferować importowanie zasobu (ze skrótem, cachowalny, automatycznie rozmiarowany) w stosunku do odwoływania się do niego z `public/` — obejmuje codzienne potrzeby dotyczące zasobów statycznych.