执行npm run build时Next.js构建失败：logo.png不存在Webpack错误

针对执行npm run build时出现的「找不到.next/static/media/logo.ecfa485c.PNG」报错，以下是可行的解决方案：

1. 校验文件名大小写一致性 #

Windows文件系统不区分大小写，但Next.js构建生成的哈希文件名会严格校验大小写。报错中目标文件后缀为.PNG，但你的源文件可能是小写.png：

• 确认public目录下logo文件的实际后缀是.PNG还是.png
• 检查代码中所有引用该文件的位置，确保文件名（含后缀）的大小写与实际文件完全匹配

2. 清理构建缓存后重新构建 #

缓存损坏可能导致构建流程无法正确生成或读取资源：

• 删除.next目录：

rm -rf .next

• （可选）清除npm缓存：

npm cache clean --force

• （可选）重新安装依赖（若怀疑依赖损坏）：

rm -rf node_modules package-lock.json
npm install

• 重新执行构建命令：

npm run build

3. 确认logo.png的实际存放路径 #

从你的项目结构来看，public目录下有多个子文件夹，但未显示logo.png直接放在public根目录：

• 检查logo.png是否在public根目录，还是某个子文件夹（如public/footer）中
• 若在子文件夹，代码中的引用路径需对应调整，比如引用/footer/logo.png而非/logo.png

4. 排查自定义Next.js配置问题 #

如果你的next.config.js中有自定义webpack配置或资源处理规则，可能干扰静态资源打包：

• 暂时注释掉next.config.js中的自定义配置，重新构建测试
• 确保配置中没有错误排除public目录下的静态资源

5. 检查Windows文件权限 #

Windows环境下的权限限制可能导致webpack无法读取或生成文件：

• 右键项目文件夹，选择「属性」→「安全」，确认当前用户拥有读写权限
• 尝试以管理员身份启动终端，再执行npm run build

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