Menu

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

缓存

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

Cache-Control: public, max-age=0

Robots、Favicons 和其他文件

对于静态元数据文件，如 robots.txt、favicon.ico 等，你应该使用 app 文件夹中的特殊元数据文件。

值得注意的是：

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