The public directory holds static files that Next.js serves from the root URL. A file at public/logo.png is available at /logo.png, with no path prefix.
public/
favicon.ico → /favicon.ico
logo.png → /logo.png
images/
hero.jpg → /images/hero.jpg
Use it for files that need a fixed URL, such as images, fonts or a site verification file. Next.js cannot safely cache files in public because they may change, so it serves them with Cache-Control: public, max-age=0.
A static file must not share its name with a page in pages, because that conflict is a build error. In the App Router, prefer the special metadata files inside app for robots.txt and the favicon.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓