静态资源

Next.js 可以服务静态文件，例如图片，这些文件位于根目录下的名为 public 的文件夹中。然后，您的代码可以通过基本 URL (/) 开始引用 public 中的文件。

例如，文件 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

机器人、Favicons 等

该文件夹也可用于 robots.txt、favicon.ico、Google 网站验证以及任何其他静态文件（包括 .html）。但请确保没有与 pages/ 目录中的文件同名的静态文件，因为这会导致错误。阅读更多。

需要了解

目录必须命名为 public。名称不能更改，它是用于服务静态资源的唯一目录。

只有在构建时位于 public 目录中的资源才会由 Next.js 提供服务。请求时添加的文件将不可用。我们建议使用第三方服务（如 Vercel Blob）进行持久性文件存储。