public 目录中的静态资源

编程语言

467

public 目录中的静态资源

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.txt、favicon.ico 等，你应该在 app 文件夹中使用特殊元数据文件。

值得注意 :

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

只有在构建时位于 public 目录中的资产会由 Next.js 提供服务。请求时添加的文件将无法使用。我们建议使用像 Vercel Blob 这样的第三方服务来进行持久文件存储。

EchoEcho官方

无论前方如何，请不要后悔与我相遇。

1377

发布数

439

关注者

2223579

累计阅读

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

缓存

Robot、图标等

热门教程文档