Next.js应用部署Netlify失败：图片路径错误及无build文件夹问题

图片引用路径修正 #

Next.js对public目录下的资源有固定引用规则：直接以根路径/开头引用，不需要带../public/前缀。比如在pages/index.js里引用图片，应该写成：

// 使用Next.js Image组件
import Image from 'next/image';
<Image src="/figma1.png" alt="描述" width={xxx} height={xxx} />

// 或者原生img标签
<img src="/figma1.png" alt="描述" />

原代码里的../public/figma1.png会被webpack当成普通模块路径查找，不符合Next.js的资源解析逻辑，所以会报“Module not found”错误。

本地构建产物目录问题 #

Next.js默认构建产物是.next文件夹，而非build。如果需要生成可手动部署的静态文件目录，修改package.json的scripts字段：

"scripts": {
  "build": "next build && next export"
}

执行npm run build后会生成out目录（Next.js 12及以上版本），这个目录就是可用于手动部署的静态文件集合。

Netlify构建配置检查 #

• 构建命令设置为npm run build
• 发布目录根据情况选择：用默认构建选.next，用next export选out
• 可添加NODE_VERSION环境变量，指定和本地一致的Node版本，避免依赖兼容问题

仓库文件校验 #

确认仓库中public/figma1.png文件真实存在，注意文件名大小写（Linux环境下区分大小写，本地Windows/macOS可能不区分），避免因大小写不匹配导致路径找不到。

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