Next.js中PDF下载按钮出现“Failed - No file”问题排查

以下是导致你遇到“Failed - No file”错误的常见原因：

• 静态资源放置路径错误
  Next.js对静态资源的存放位置有严格要求，必须放在项目根目录的public文件夹下。如果你的cv文件没放在这个目录里，或者引用路径用了相对路径（比如./cv.pdf），Next.js无法正确定位资源，就会下载失败。正确的引用方式应该是用根路径，比如/cv.pdf（对应public/cv.pdf）。

• 资源导入方式不符合Next.js规范
  若你是通过import cv from '../assets/cv.pdf'这种方式导入文件，在纯React里webpack能直接解析，但Next.js中这种导入会生成带哈希值的编译后路径，直接赋值给href可能导致路径失效。这种情况下建议把文件移到public目录，用根路径直接引用。

• 文件名包含特殊字符导致解析异常
  你设置的下载文件名name cv.pdf包含空格，部分浏览器或Next.js的路由处理逻辑可能对未编码的空格解析出错，导致无法识别文件。可以将文件名改为无空格的形式（比如name-cv.pdf），或者对文件名做编码处理：

  <a href={cv} download={encodeURIComponent("name cv.pdf")}> Download CV </a>
  

• 静态导出或SSR模式下的资源服务问题
  如果你的项目使用next export做静态导出，要确保导出过程中静态资源被正确打包到out目录；若是SSR模式，需保证资源的访问路径是服务器能正确解析的绝对路径，避免使用仅客户端能识别的相对路径。

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