chore(docs): fix docs for static assets (public
) (#61225)
Closes NEXT-2260 --------- Co-authored-by: Lee Robinson <me@leerob.io>
This commit is contained in:
parent
c9321c72c9
commit
7f4ca97ef8
1 changed files with 10 additions and 6 deletions
|
@ -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 (`/`).
|
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'
|
import Image from 'next/image'
|
||||||
|
|
||||||
export function Avatar() {
|
export function Avatar({ id, alt }) {
|
||||||
return <Image src="/me.png" alt="me" width="64" height="64" />
|
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
|
## 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
|
```jsx
|
||||||
Cache-Control: public, max-age=31536000, immutable
|
Cache-Control: public, max-age=0
|
||||||
```
|
```
|
||||||
|
|
||||||
## Robots, Favicons, and others
|
## Robots, Favicons, and others
|
||||||
|
|
Loading…
Reference in a new issue