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="A portrait of me" />
}Next.js 无法安全地缓存 public 文件夹中的资源,因为它们可能会更改。应用的默认缓存头是:
Cache-Control: public, max-age=0该文件夹对于 robots.txt、favicon.ico、Google 站点验证以及任何其他静态文件(包括 .html)也很有用。但请确保不要有与 pages/ 目录中文件同名的静态文件,因为这会导致错误。阅读更多。
对于静态元数据文件,例如 robots.txt、favicon.ico 等,您应该在 app 文件夹内使用特殊元数据文件。