跳到内容

`public` 文件夹中的静态资源

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.txtfavicon.ico 等,你应该使用 app 文件夹内的特殊元数据文件

须知

  • 目录必须命名为 public。名称不能更改,并且它是唯一用于提供静态资源的目录。
  • 只有在 构建时 位于 public 目录中的资源才会被 Next.js 提供。在请求时添加的文件将不可用。我们建议使用第三方服务,例如 Vercel Blob 用于持久文件存储。