为何要将图片存放在Next.js的public文件夹？有哪些优势？

看起来我可以将图片放在任意位置都能正常运行，但Next.js似乎推荐将图片存放至public文件夹，这样做有什么优势？

把静态图片放在Next.js项目根目录的public文件夹有几个非常实际的好处：

• 路径引用零出错：public下的资源会被Next.js直接映射到网站的根路由，引用时直接用绝对路径即可，比如你把avatar.png放在public/assets/目录下，不管你在项目哪个层级的组件、页面里引用，直接写/assets/avatar.png就能正常加载，完全不用计算相对路径，也不会出现部署后路径404的问题。
• 完美适配官方优化能力：使用Next.js自带的next/image组件调用public下的图片时，不需要额外配置远程资源域名白名单，就能自动享受官方的图片压缩、格式自动转成更高压缩率的WebP/AVIF、响应式尺寸适配等优化能力，性能提升不用自己额外写配置。
• 构建效率更高：Next.js在打包时会默认把public下的资源归类为不需要编译的静态资源，不会被打包进JS bundle里，也不需要你额外配置webpack的资源解析规则。如果把图片放在src这类源码目录下，要么需要手动加loader配置，要么可能被webpack转成base64内嵌到JS代码里，反而增大包体积、拖慢页面加载速度。
• 项目结构更易维护：所有静态资源统一放在public下管理，不管是自己后期改资源，还是团队协作对接，都能快速定位到对应文件，不会出现不同开发把图片散放在各个组件目录下，导致项目结构混乱的问题。

内容的提问来源于stack exchange，提问作者antonwilhelm