Skip to content
dev-docs

public Folder

Source URL: https://nextjs.org/docs/pages/api-reference/file-conventions/public-folder

public Folder

Section titled “public Folder”

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

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

import Image from 'next/image'


export function Avatar({ id, alt }) {
  return <Image src={`/avatars/${id}.png`} alt={alt} width="64" height="64" />
}


export function AvatarOfMe() {
  return <Avatar id="me" alt="A portrait of me" />
}

Caching

Section titled “Caching”

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

Cache-Control: public, max-age=0

Robots, Favicons, and others

Section titled “Robots, Favicons, and others”

The folder is also useful for robots.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 the pages/ directory, as this will result in an error. Read more.

Section titled “The folder is also useful for robots.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 the pages/ directory, as this will result in an error. Read more.”