Πώς εξυπηρετείς στατικά assets στο Next.js;

Question

Accepted Answer

Το Next.js εξυπηρετεί στατικά αρχεία (εικόνες, γραμματοσειρές, εικονίδια, PDF, robots.txt) από τον ειδικό φάκελο public/ στη ρίζα του έργου σου.

Ο φάκελος public αντιστοιχίζεται στη ρίζα 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

Ένα αρχείο στο είναι διαθέσιμο στη URL — το τμήμα αφαιρείται. Αναφερόμενα σε αυτά με μια απόλυτη διαδρομή από τη ρίζα:

Download guide ); } ``` ## public/ έναντι εισαγωγής assets ```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 ``` Οι **εισαγόμενες** εικόνες παίρνουν όνομα αρχείου με hash περιεχομένου (εξαιρετικό για μακροπρόθεσμη αποθήκευση στο cache) και το Next μπορεί να συμπεράνει τις διαστάσεις τους. Χρησιμοποίησε `public/` για αρχεία που αναφέρονται από σταθερή URL (favicon, robots.txt, og-images, προς λήψη) και **εισαγωγές** για εικόνες που χρησιμοποιούνται απευθείας σε components. ## Προειδοποιήσεις - Μόνο αρχεία που υπάρχουν στο **χρόνο κατασκευής** εξυπηρετούνται — το `public/` δεν είναι προορισμός ανεβάσματος κατά τη διάρκεια εκτέλεσης. - Μη τοποθετείς μυστικά εκεί — όλα στο `public/` είναι δημόσια προσβάσιμα μέσω URL. ## Γιατί έχει σημασία Ο φάκελος `public/` είναι ο απλός, με βάση τη σύμβαση τρόπος εξυπηρέτησης στατικών αρχείων στο Next.js (favicons, robots.txt, OG images, λήψεις). Το να ξέρεις ότι το περιεχόμενό του αντιστοιχίζεται στη ρίζα URL — και πότε να προτιμήσεις την εισαγωγή ενός asset (με hash, cache-friendly, auto-sized) έναντι της αναφοράς του από `public/` — καλύπτει τις καθημερινές ανάγκες στατικών assets.