静态资源
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.txt
、favicon.ico
、Google 网站验证和任何其他静态文件(包括 .html
)。但请确保不要有与 pages/
目录中的文件同名的静态文件,因为这会导致错误。阅读更多。
须知
- 目录必须命名为
public
。名称无法更改,并且它是唯一用于提供静态资源的目录。- 只有在 构建时 位于
public
目录中的资源才会被 Next.js 提供。在请求时添加的文件将不可用。我们建议使用第三方服务,例如 Vercel Blob 用于持久文件存储。
这篇文章对您有帮助吗?