乐闻世界logo
搜索文章和话题

What is the purpose of the public folder in Next.js?

2 个月前提问
2 个月前修改
浏览次数36

1个答案

1

Next.js中的公共文件夹(public/)主要用于存放静态资源,比如图片、字体文件、样式表、JavaScript文件等。这些文件在Next.js应用中会被保持不变,不会经过Webpack处理,直接被服务器以文件的形式提供。

主要用途包括:

  1. 存放图片和图标: 可以将网站使用的所有图片或图标放在公共文件夹中。例如,网站的logo、导航栏图标等,这些资源通常不会改变,直接放在公共文件夹中方便引用。

  2. 存放样式表和脚本: 虽然Next.js支持CSS-in-JS等方式,但某些全局样式或第三方库的CSS/JS文件可以放在公共文件夹中,直接通过链接引入到项目中。

  3. 优化性能: 因为这些文件可以被浏览器缓存,所以放在公共文件夹中可以提高网站的加载速度。

应用实例:

假设我们正在开发一个电商网站,需要用到一系列的产品图片。我们可以将这些图片上传到public/images/目录下。在Next.js应用中,我们可以非常方便地通过相对URL(如/images/product-001.jpg)来引用这些图片,而不需要进行额外的配置。

这种方式的好处是简化了资源的管理和引用,提高了开发效率,并且可以利用HTTP缓存机制来提升客户端访问这些静态资源的速度。

2024年7月15日 10:32 回复

你的答案