Menu

public Folder

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、Google 站点验证和任何其他静态文件(包括 .html)也很有用。但是请确保没有与 pages/ 目录中的文件同名的静态文件,因为这将导致错误。阅读更多