public文件夹中的静态资源

Next.js 可以在根目录下的public文件夹中提供静态文件，如图像。然后，从以根路径(/)开始的代码引用public文件夹中的文件。

例如, 访问/avatars/me.png路径可以查看public/avatars/me.png文件。显示该图像的代码可能如下所示:

import Image from "next/image";

export function Avatar({ id, alt }) {
  return <img 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 等

对于静态 metadata 文件，如robots.txt、 favicon.ico等，您应该在app文件夹中使用特殊的 metadata 文件。

您需要知道:

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