React——Next.js 静态资源与 public 目录详解

问题场景

部署 Next.js 应用后，发现所有图片都显示不出来，页面上一片空白图标。本地开发明明是好的，为什么部署后就不行了？

理解 Next.js 的构建产物

Next.js 使用output: 'standalone'模式构建时，会生成一个独立的部署包：

.next/ └── standalone/ ← 部署包 ├── server.js ← 启动文件 ├── node_modules/ ← 精简的依赖 └── .next/ ← 编译后的代码

问题来了：public目录和.next/static目录不会自动包含进去！

public 目录是什么？

public目录用于存放静态资源，如图片、字体、favicon 等：

project/ ├── public/ │ ├── images/ │ │ ├── logo.png │ │ └── banner.jpg │ ├── fonts/ │ │ └── custom.woff2 │ └── favicon.ico └── src/

在代码中可以直接用根路径引用：

// 引用 public/images/logo.png <img /> // 引用 public/favicon.ico <link />

为什么部署后图