public Folder
Next.js 可以在根目录下的 public
文件夹中提供静态文件,比如图片。public
中的文件可以从基本 URL(/
)开始被你的代码引用。
例如,文件 public/avatars/me.png
可以通过访问 /avatars/me.png
路径查看。显示该图片的代码可能如下所示:
avatar.js
import Image from 'next/image'
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" />
}
缓存
Next.js 不能安全地缓存 public
文件夹中的资源,因为它们可能会发生变化。应用的默认缓存头是:
Cache-Control: public, max-age=0
Robots、Favicons 和其他
对于静态元数据文件,如 robots.txt
、favicon.ico
等,你应该在 app
文件夹中使用特殊的元数据文件。