public 目录中的静态资源

Next.js 可以在根目录中名为 public 的文件夹下提供静态文件，如图片。public 内部的文件可以通过代码引用，从基础 URL (/) 开始。

例如，文件 public/avatars/me.png 可以通过访问 /avatars/me.png 路径来查看。显示该图片的代码可能如下所示：

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="我的肖像" />
}

缓存

Next.js 无法安全地缓存 public 文件夹中的资源，因为它们可能会发生变化。默认应用的缓存头部为：

Cache-Control: public, max-age=0

机器人、favicons 和其他

须知：

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