05-static-assets.mdx

title	description
Static Assets	Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.

{/* The content of this doc is shared between the app and pages router. You can use the <PagesOnly>Content</PagesOnly> component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}

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:

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.

For static metadata files, such as robots.txt, favicon.ico, etc, you should use special metadata files inside the app folder.

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 runtime won't be available. We recommend using a third-party service like AWS S3 for persistent file storage.