How do you serve static assets in Next.js?

Question

Accepted Answer

Next.js serves static files (images, fonts, icons, PDFs, robots.txt) from the special public/ folder at the root of your project.

The public folder maps to the 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

A file at is available at the URL — the part is dropped. Reference them with an absolute path from the root:

Download guide ); } ``` ## public/ vs importing 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 ``` **Imported** images get a content-hashed filename (great long-term caching) and Next can infer their dimensions. Use `public/` for files referenced by stable URL (favicon, robots.txt, og-images, downloadables) and **imports** for images used directly in components. ## Caveats - Only files present at **build time** are served — `public/` isn't a runtime upload destination. - Don't put secrets there — everything in `public/` is publicly accessible by URL. ## Why it matters The `public/` folder is the simple, convention-based way to serve static files in Next.js (favicons, robots.txt, OG images, downloads). Knowing that its contents map to the URL root — and when to prefer importing an asset (hashed, cacheable, auto-sized) versus referencing it from `public/` — covers everyday static-asset needs.