public 目录中的静态资源 5个月前

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

Robot、图标等

对于静态元数据文件,如 robots.txtfavicon.ico 等,你应该在 app 文件夹中使用 特殊元数据文件

值得注意 :

  • 目录必须命名为 public。名称不能更改,它是唯一用于提供静态资产的目录。
  • 只有在 构建时 位于 public 目录中的资产会由 Next.js 提供服务。请求时添加的文件将无法使用。我们建议使用像 Vercel Blob 这样的第三方服务来进行持久文件存储。
image
EchoEcho官方
无论前方如何,请不要后悔与我相遇。
1377
发布数
439
关注者
2244105
累计阅读

热门教程文档

Dart
35小节
React
18小节
C++
73小节
C
14小节
Golang
23小节