Static File Serving

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, if you add an image to public/me.png, the following code will access the image:

import Image from 'next/image'
function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}
export default Avatar

Note: next/image requires Next.js 10 or later.

This folder is also useful for robots.txt, favicon.ico, Google Site Verification, and any other static files (including .html)!

Note: Don’t name the public directory anything else. The name cannot be changed and is the only directory used to serve static assets.

Note: Be 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: https://nextjs.org/docs/messages/conflicting-public-file-page

Note: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won’t be available. We recommend using a third party service like AWS S3 for persistent file storage.