Hoe serveer je statische assets in Next.js?

Question

Accepted Answer

Next.js serveert statische bestanden (afbeeldingen, fonts, iconen, PDF's, robots.txt) uit de speciale public/ map in de root van je project.

De public folder wordt gekoppeld aan de URL root

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

Een bestand op is beschikbaar op de URL — het gedeelte wordt weggelaten. Refereer ernaar met een absoluut pad vanaf de root:

Download guide ); } ``` ## public/ vs assets importeren ```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 ``` **Geïmporteerde** afbeeldingen krijgen een content-hashed bestandsnaam (geweldig voor langdurig cachen) en Next.js kan hun afmetingen afleiden. Gebruik `public/` voor bestanden waarnaar wordt verwezen met een stabiele URL (favicon, robots.txt, og-images, downloads) en **imports** voor afbeeldingen die rechtstreeks in componenten worden gebruikt. ## Voorzichtigheid - Alleen bestanden die aanwezig zijn bij **build time** worden geserveerd — `public/` is geen runtime upload bestemming. - Plaats geen geheimen daar — alles in `public/` is openbaar toegankelijk via URL. ## Waarom het belangrijk is De `public/` map is de eenvoudige, convention-based manier om statische bestanden in Next.js te serveren (favicons, robots.txt, OG-images, downloads). Weten dat de inhoud ervan wordt gekoppeld aan de URL root — en wanneer je een asset liever importeert (gehashed, cacheable, auto-sized) versus ernaar verwijst vanuit `public/` — dekt dagelijkse behoeften voor statische assets.