You are currently viewing documentation for version 13 of Next.js.
Static Assets
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 me.png
inside public
, the following code will access the image:
Avatar.js
import Image from 'next/image'
export function Avatar() {
return <Image src="/me.png" alt="me" width="64" height="64" />
}
This 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.
Good to know:
- The directory must be named
public
. The name cannot be changed and it's the only directory used to serve static assets.- Only assets that are in the
public
directory at build time will be served by Next.js. Files added at request time won't be available. We recommend using a third-party service like AWS S3 for persistent file storage.
Was this helpful?