public Folder

Next.js can serve static files, like images, under a folder calledpublic in the root directory. Files insidepublic can then be referenced by your code starting from the base URL (/).

For example, the filepublic/avatars/me.png can be viewed by visiting the/avatars/me.png path. The code to display that image might look like:

import Imagefrom'next/image'exportfunctionAvatar({ id, alt }) {return <Imagesrc={`/avatars/${id}.png`}alt={alt}width="64"height="64" />}exportfunctionAvatarOfMe() {return <Avatarid="me"alt="A portrait of me" />}

Caching

Next.js cannot safely cache assets in thepublic folder because they may change. The default caching headers applied are:

Cache-Control: public, max-age=0

Robots, Favicons, and others

The folder is also useful forrobots.txt,favicon.ico, Google Site Verification, and any other static files (including.html). But make sure to not have a static file with the same name as a file in thepages/ directory, as this will result in an error.Read more.