From 7f4ca97ef880674277b43b2e46e81d8d3c600cfc Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Fri, 26 Jan 2024 15:19:54 -0500
Subject: [PATCH] chore(docs): fix docs for static assets (`public`) (#61225)

Closes NEXT-2260

---------

Co-authored-by: Lee Robinson <me@leerob.io>
---
 .../06-optimizing/11-static-assets.mdx           | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/docs/02-app/01-building-your-application/06-optimizing/11-static-assets.mdx b/docs/02-app/01-building-your-application/06-optimizing/11-static-assets.mdx
index d6c3a2231ed41..7682b44463628 100644
--- a/docs/02-app/01-building-your-application/06-optimizing/11-static-assets.mdx
+++ b/docs/02-app/01-building-your-application/06-optimizing/11-static-assets.mdx
@@ -8,22 +8,26 @@ description: Next.js allows you to serve static files, like images, in the publi
 
 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:
+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:
 
-```jsx filename="Avatar.js"
+```jsx filename="avatar.js"
 import Image from 'next/image'
 
-export function Avatar() {
-  return <Image src="/me.png" alt="me" width="64" height="64" />
+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
 
-Next.js automatically adds caching headers to immutable assets in the `public` folder. The default caching headers applied are:
+Next.js cannot safely cache assets in the `public` folder because they may change. The default caching headers applied are:
 
 ```jsx
-Cache-Control: public, max-age=31536000, immutable
+Cache-Control: public, max-age=0
 ```
 
 ## Robots, Favicons, and others