---
title: "Statics Assets in `public`"
description: Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.
url: "https://nextjs.org/docs/14/app/building-your-application/optimizing/static-assets"
version: 14.2.35
lastUpdated: 2024-08-22
prerequisites:
  - "Building Your Application: /docs/14/app/building-your-application"
  - "Optimizing: /docs/14/app/building-your-application/optimizing"
---


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:

```jsx filename="Avatar.js"
import Image from 'next/image'

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

## Caching

Next.js automatically adds caching headers to immutable assets in the `public` folder. The default caching headers applied are:

```jsx
Cache-Control: public, max-age=31536000, immutable
```

## Robots, Favicons, and others

> 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](/docs/app/api-reference/next-cli#build) 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](https://aws.amazon.com/s3/) for persistent file storage.
---

For an index of all available documentation, see [/docs/14/llms.txt](/docs/14/llms.txt)